百度地图使用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="width: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 = {
width: 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>