百度地图使用2-自定义覆盖物

@model ShanwuWebSite.Areas.COM.Models.BaiduMapModel
@{
    ViewBag.Title = "百度地图";
    Layout = "~/Areas/COM/Views/Shared/_Layout.cshtml";
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<br />
<br />
<br />
<div id="allmap" style="300px; height:300px;"></div>
<script src="http://api.map.baidu.com/api?v=2.0&ak=Ooaq16jRplQWMN3SxnxPq3rW" type="text/javascript"></script>
<script type="text/javascript">

    $(function () {
        @*// 百度地图API功能
        var map = new BMap.Map("allmap");    // 创建Map实例
        map.centerAndZoom(new BMap.Point(@Model.Latitude, @Model.Longitude), 11);  // 初始化地图,设置中心点坐标和地图级别
        //map.centerAndZoom("济南", 11);  // 初始化地图,设置中心点坐标和地图级别
        map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
        map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放*@

        // 百度地图API功能
        @*var map = new BMap.Map("allmap");
        var point = new BMap.Point(116.417854, 39.921988);
        //  var marker = new BMap.Marker(point);  // 创建标注

        var myIcon = new BMap.Icon('@Url.Action("GetAvator", new {path= "http://hgproductimg.oss-cn-qingdao.aliyuncs.com/20151208/64e6168047e94e1fac4e94493b2521fc.jpg" })', new BMap.Size(100, 100));
        var marker2 = new BMap.Marker(point, { icon: myIcon });  // 创建标注
        //marker.setIcon(new BMap.IconSequence('@Url.Action(@"http://hgproductimg.oss-cn-qingdao.aliyuncs.com/20151208/64e6168047e94e1fac4e94493b2521fc.jpg")', new BMap.Size(100, 100)));
        map.addOverlay(marker2);              // 将标注添加到地图中
        map.centerAndZoom(point, 15);
        var opts = {
             200,     // 信息窗口宽度
            height: 100,     // 信息窗口高度
            title: "海底捞王府井店", // 信息窗口标题
            enableMessage: true,//设置允许信息窗发送短息
            message: "亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~"
        }
        var infoWindow = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts);  // 创建信息窗口对象
        marker2.addEventListener("click", function () {
            map.openInfoWindow(infoWindow, point); //开启信息窗口
        });*@
        var map = new BMap.Map("allmap");            // 创建Map实例
        var point = new BMap.Point(116.404, 39.915);    // 创建点坐标
        map.centerAndZoom(point, 15);                     // 初始化地图,设置中心点坐标和地图级别。

        //1、定义构造函数并继承Overlay
        // 定义自定义覆盖物的构造函数
        function SquareOverlay(center, length, src) {
            this._center = center;
            this._length = length;
            this._src = src;
        }
        // 继承API的BMap.Overlay
        SquareOverlay.prototype = new BMap.Overlay();

        //2、初始化自定义覆盖物
        // 实现初始化方法
        SquareOverlay.prototype.initialize = function (map) {
            // 保存map对象实例
            this._map = map;
            // 创建div元素，作为自定义覆盖物的容器
            var div = document.createElement("div");
            // 创建img元素 作为图像显示
            var img = document.createElement("img");

            //图像相关设置
            img.src = this._src;
            img.style.height = this._length + "px";
            img.style.width = this._length + "px";
            img.style.borderRadius = "50px";

            div.style.position = "absolute";
            // 可以根据参数设置元素外观
            div.style.width = this._length + "px";
            div.style.height = this._length + "px";
            div.appendChild(img);
            div.style.borderRadius = "50px";
            // 将div添加到覆盖物容器中
            map.getPanes().markerPane.appendChild(div);
            // 保存div实例
            this._div = div;
            // 需要将div元素作为方法的返回值，当调用该覆盖物的show、
            // hide方法，或者对覆盖物进行移除时，API都将操作此元素。
            return div;
        }

        //3、绘制覆盖物
        // 实现绘制方法
        SquareOverlay.prototype.draw = function () {
            // 根据地理坐标转换为像素坐标，并设置给容器
            var position = this._map.pointToOverlayPixel(this._center);
            this._div.style.left = position.x - this._length / 2 + "px";
            this._div.style.top = position.y - this._length / 2 + "px";
        }

        //4、显示和隐藏覆盖物
        // 实现显示方法
        SquareOverlay.prototype.show = function () {
            if (this._div) {
                this._div.style.display = "";
            }
        }
        // 实现隐藏方法
        SquareOverlay.prototype.hide = function () {
            if (this._div) {
                this._div.style.display = "none";
            }
        }

        //5、添加其他覆盖物方法
        //比如，改变颜色
        SquareOverlay.prototype.yellow = function () {
            if (this._div) {
                this._div.style.background = "yellow";
            }
        }

        //6、自定义覆盖物添加事件方法
        SquareOverlay.prototype.addEventListener = function (event, fun) {
            this._div['on' + event] = fun;
        }

        //7、添加自定义覆盖物
        var mySquare = new SquareOverlay(new BMap.Point(116.404, 40), 50, "http://hgproductimg.oss-cn-qingdao.aliyuncs.com/20151208/64e6168047e94e1fac4e94493b2521fc.jpg");
        map.addOverlay(mySquare);

        //8、 为自定义覆盖物添加点击事件
        mySquare.addEventListener('click', function () {
            var infoWindow = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层");  // 创建信息窗口对象
            map.openInfoWindow(infoWindow, new BMap.Point(116.404, 40)); //开启信息窗口
        });
    });
</script>