百度地图API自定义覆盖物与添加点击事件

来源：互联网发布：计算机编程英语词汇编辑：程序博客网时间：2024/04/30 14:51

本文适合零基础百度地图API开发者

效果图1

效果图2

直接上代码；另注：code上面很多是钓鱼君自己写的动态的数据，所以不能拿过去马上可以用，本文只提供借鉴，不保证100%原创，但功能是修改之后已经实现。欢迎找茬，欢迎指教。

<body><input type="hidden" value='${mapList }' id="mapList"><div id="container"></div><script type="text/javascript"> var basePath = '<%=basePath%>';var map = new BMap.Map("container"); // 创建地图实例  var point = new BMap.Point(121.53579, 31.227981); // 创建点坐标  map.centerAndZoom(point, 11); // 初始化地图，设置中心点坐标和地图级别  /* map.addControl(new BMap.NavigationControl({// 靠左上角位置    anchor: BMAP_ANCHOR_TOP_LEFT,    // LARGE类型    type: BMAP_NAVIGATION_CONTROL_LARGE,    // 启用显示定位    enableGeolocation: true}));// 添加带有定位的导航控件 *///map.addControl(new BMap.ScaleControl());//比例尺控件//map.addControl(new BMap.OverviewMapControl());//缩略地图控件map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放//map.addControl(new BMap.MapTypeControl()); //地图类型控件，默认位于地图右上方。map.setCurrentCity("上海");//var marker = new BMap.Marker(point);        // 创建标注    //var json=[{name:"a",age:12},{name:"b",age:11},{name:"c",age:13},{name:"d",age:14}]; // 添加定位控件  /* var geolocationControl = new BMap.GeolocationControl();  geolocationControl.addEventListener("locationSuccess", function(e){    // 定位成功事件    var address = '';    address += e.addressComponent.province;    address += e.addressComponent.city;    address += e.addressComponent.district;    address += e.addressComponent.street;    address += e.addressComponent.streetNumber;    alert("当前定位地址为：" + address);  });  geolocationControl.addEventListener("locationError",function(e){    // 定位失败事件    alert(e.message);  });  map.addControl(geolocationControl); */

<pre name="code" class="html"><span style="white-space:pre"></span>// 复杂的自定义覆盖物function ComplexCustomOverlay(point, text, mouseoverText){this._point = point;this._text = text;this._overText = mouseoverText;}ComplexCustomOverlay.prototype = new BMap.Overlay();//初始化ComplexCustomOverlayComplexCustomOverlay.prototype.initialize = function(map){this._map = map;var div =  document.createElement("div");this._div = div;div.style.position = "absolute";div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);div.style.background = "url(<%=basePath %>images/blue.gif) repeat-x 0 -33px";div.style.color = "white";div.style.height = "21px";div.style.padding = "2px";div.style.lineHeight = "18px";div.style.whiteSpace = "nowrap";div.style.MozUserSelect = "none";div.style.fontSize = "12px";var span =  document.createElement("span");this._span = span;div.appendChild(span);span.appendChild(document.createTextNode(this._text)); var that = this;//var arrow = this._arrow = document.createElement("div");var arrow = document.createElement("div");this._arrow = arrow;arrow.style.background = "url(<%=basePath %>images/blue.gif) no-repeat -20px -100px";arrow.style.position = "absolute";arrow.style.width = "30px";arrow.style.height = "12px";arrow.style.top = "19px";arrow.style.left = "10px";arrow.style.overflow = "hidden";div.appendChild(arrow);var leftBar  = document.createElement("div");this._leftBar = leftBar;leftBar.style.background = "url(<%=basePath %>images/blue.gif) no-repeat -12px -2px";leftBar.style.position = "absolute";leftBar.style.width = "11px";leftBar.style.height = "24px";leftBar.style.top = "0px";leftBar.style.left = "-10px";leftBar.style.overflow = "hidden";div.appendChild(leftBar);var rightBar= document.createElement("div");this._rightBar = rightBar;rightBar.style.background = "url(<%=basePath %>images/blue.gif) no-repeat -22px -2px";rightBar.style.position = "absolute";rightBar.style.width = "11px";rightBar.style.height = "24px";rightBar.style.top = "0px";rightBar.style.right = "-10px";rightBar.style.overflow = "hidden";div.appendChild(rightBar); div.onmouseover = function(){this.style.background = "url(<%=basePath %>images/blue2.gif) repeat-x 0 -33px";this.getElementsByTagName("span")[0].innerHTML = that._overText;arrow.style.background = "url(<%=basePath %>images/blue2.gif) no-repeat -20px -100px";leftBar.style.background = "url(<%=basePath %>images/blue2.gif) no-repeat -12px -2px";rightBar.style.background = "url(<%=basePath %>images/blue2.gif) no-repeat -22px -2px";}div.onmouseout = function(){this.style.background = "url(<%=basePath %>images/blue.gif) repeat-x 0 -33px";this.getElementsByTagName("span")[0].innerHTML = that._text;arrow.style.background = "url(<%=basePath %>images/blue.gif) no-repeat -20px -100px";leftBar.style.background = "url(<%=basePath %>images/blue.gif) no-repeat -12px -2px";rightBar.style.background = "url(<%=basePath %>images/blue.gif) no-repeat -22px -2px";}map.getPanes().labelPane.appendChild(div);return div;}//画ComplexCustomOverlayComplexCustomOverlay.prototype.draw = function(){var map = this._map;var pixel = map.pointToOverlayPixel(this._point);this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";this._div.style.top = pixel.y - 30 + "px";}//添加监听事件ComplexCustomOverlay.prototype.addEventListener = function(event,fun){    this._div['on'+event] = fun;}

<span style="white-space:pre"></span>//事件处理var jsonObj = $("#mapList").val();var json = strToJson(jsonObj);for(var o in json){var txt = json[o].name;var pointx = json[o].jd;var pointy = json[o].wd;//var mkr = new BMap.Marker(new BMap.Point(json[o].jd,json[o].wd));var mkr = new ComplexCustomOverlay(new BMap.Point(pointx, pointy), txt, txt);map.addOverlay(mkr);   (function(){var index = o;/* mkr.addEventListener('touchstart',function(){this.openInfoWindow(new BMap.InfoWindow('我是'+json[index].name));}); */ mkr.addEventListener('touchstart',function(){//把所有的驾校分离出来var Arr = json[index].flag.split("|");//存放单个驾校var jxArr;//驾校IDvar jxid;//驾校名称var jxname;var content = '';content +="<div class='map'>";content +="<div class='img' style='background-image: url(<%=basePath%>images/"+json[index].pic+".png)'>";content +="</div><div class='login'>";for(var i=0;i<Arr.length;i++){jxArr = Arr[i].split('_');jxname = jxArr[0];jxid = jxArr[1];content +="<span><a href='<%=basePath%>user/user_findSchoolByID.action?jxid="+jxid+"'>"+jxname+"</a></span>";}content +="</div><p>基地地址："+json[index].add+"</p>";content +="</div>";var infoWindow = new BMap.InfoWindow(content,{title: "<h3 class='lt'>"+json[index].name+"</h3>", //标题   enableAutoPan : true, //自动平移width: 300, //宽度              height: 160, //高度               enableMessage:false});  // 创建信息窗口对象map.openInfoWindow(infoWindow, new BMap.Point(json[index].jd, json[index].wd));      // 打开信息窗口 */}); mkr.addEventListener('click',function(){//把所有的驾校分离出来var Arr = json[index].flag.split("|");//存放单个驾校var jxArr;//驾校IDvar jxid;//驾校名称var jxname;var content = '';content +="<div class='map'>";content +="<div class='img' style='background-image: url(<%=basePath%>images/"+json[index].pic+".png)'>";content +="</div><div class='login'>";for(var i=0;i<Arr.length;i++){jxArr = Arr[i].split('_');jxname = jxArr[0];jxid = jxArr[1];content +="<span><a href='<%=basePath%>user/user_findSchoolByID.action?jxid="+jxid+"'>"+jxname+"</a></span>";}content +="</div><p>基地地址："+json[index].add+"</p>";content +="</div>";var infoWindow = new BMap.InfoWindow(content,{title: "<h3 class='lt'>"+json[index].name+"</h3>", //标题   enableAutoPan : true, //自动平移width: 300, //宽度              height: 160, //高度               enableMessage:false});  // 创建信息窗口对象map.openInfoWindow(infoWindow, new BMap.Point(json[index].jd, json[index].wd));      // 打开信息窗口 */}); })()}function strToJson(str){ return JSON.parse(str); }  </script></body>

</pre><pre>

另附code引用的图片

blue2.gif

blue.gif

1 0