百度地圖API自定義覆蓋物與新增點選事件

本文適合零基礎百度地圖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();
//初始化ComplexCustomOverlay
ComplexCustomOverlay.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;
}
//畫ComplexCustomOverlay
ComplexCustomOverlay.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;
//駕校ID
var 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;
//駕校ID
var 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