function initMap1() { createMap1(); //鍒涘缓鍦板浘 setMapEvent(); //璁剧疆鍦板浘浜嬩欢 addMapControl(); //鍚戝湴鍥炬坊鍔犳帶浠 addMarker1(); //鍚戝湴鍥句腑娣诲姞marker } function initMap2() { createMap2(); //鍒涘缓鍦板浘 setMapEvent(); //璁剧疆鍦板浘浜嬩欢 addMapControl(); //鍚戝湴鍥炬坊鍔犳帶浠 addMarker2(); //鍚戝湴鍥句腑娣诲姞marker } //鍒涘缓鍦板浘鍑芥暟锛 function createMap1() { var map = new BMap.Map("ditu1Content"); //鍦ㄧ櫨搴﹀湴鍥惧鍣ㄤ腑鍒涘缓涓€涓湴鍥 var point = new BMap.Point(110.320824, 20.031436); //瀹氫箟涓€涓腑蹇冪偣鍧愭爣 map.centerAndZoom(point, 18); //璁惧畾鍦板浘鐨勪腑蹇冪偣鍜屽潗鏍囧苟灏嗗湴鍥炬樉绀哄湪鍦板浘瀹瑰櫒涓 window.map = map; //灏唌ap鍙橀噺瀛樺偍鍦ㄥ叏灞€ } function createMap2() { var map = new BMap.Map("ditu2Content"); //鍦ㄧ櫨搴﹀湴鍥惧鍣ㄤ腑鍒涘缓涓€涓湴鍥 var point = new BMap.Point(114.31522, 30.570237); //瀹氫箟涓€涓腑蹇冪偣鍧愭爣 map.centerAndZoom(point, 18); //璁惧畾鍦板浘鐨勪腑蹇冪偣鍜屽潗鏍囧苟灏嗗湴鍥炬樉绀哄湪鍦板浘瀹瑰櫒涓 window.map = map; //灏唌ap鍙橀噺瀛樺偍鍦ㄥ叏灞€ } //鍦板浘浜嬩欢璁剧疆鍑芥暟锛 function setMapEvent() { // map.enableDragging(); //鍚敤鍦板浘鎷栨嫿浜嬩欢锛岄粯璁ゅ惎鐢?鍙笉鍐? // map.enableScrollWheelZoom(); //鍚敤鍦板浘婊氳疆鏀惧ぇ缂╁皬 // map.enableDoubleClickZoom(); //鍚敤榧犳爣鍙屽嚮鏀惧ぇ锛岄粯璁ゅ惎鐢?鍙笉鍐? // map.enableKeyboard(); //鍚敤閿洏涓婁笅宸﹀彸閿Щ鍔ㄥ湴鍥 map.disableDoubleClickZoom() //绂佹缂╂斁 map.disableScrollWheelZoom(); //绂佹榧犳爣婊氳疆缂╂斁 map.disableDragging(); //绂佹鎷栨嫿 } //鍦板浘鎺т欢娣诲姞鍑芥暟锛 function addMapControl() { //鍚戝湴鍥句腑娣诲姞缂╂斁鎺т欢 // var ctrl_nav = new BMap.NavigationControl({ // anchor: BMAP_ANCHOR_TOP_LEFT, // type: BMAP_NAVIGATION_CONTROL_LARGE // }); // map.addControl(ctrl_nav); //鍚戝湴鍥句腑娣诲姞缂╃暐鍥炬帶浠 // var ctrl_ove = new BMap.OverviewMapControl({ // anchor: BMAP_ANCHOR_BOTTOM_RIGHT, // isOpen: 1 // }); // map.addControl(ctrl_ove); //鍚戝湴鍥句腑娣诲姞姣斾緥灏烘帶浠 // var ctrl_sca = new BMap.ScaleControl({ // anchor: BMAP_ANCHOR_BOTTOM_LEFT // }); // map.addControl(ctrl_sca);s } //鏍囨敞鐐规暟缁 var markerArr1 = [{ title: "澶╂椂鍚屽煄 娴峰崡鍏徃", content: "鍦板潃锛氭捣鍙i緳鍗庡尯鏄庣彔璺?鍙峰崕娑﹀ぇ鍘搴?3A11", point: "110.320774|20.031037", isOpen: 1, icon: { w: 23, h: 25, l: 46, t: 21, x: 9, lb: 12 } }]; var markerArr2 = [{ title: "澶╂椂鍚屽煄 姝︽眽鍏徃", content: "鍦板潃锛氭姹夋鏄屽尯涓存睙澶ч亾96鍙蜂竾杈句腑蹇?06", point: "114.315314|30.569841", isOpen: 1, icon: { w: 23, h: 25, l: 46, t: 21, x: 9, lb: 12 } }]; //鍒涘缓marker function addMarker1() { for (var i = 0; i < markerArr1.length; i++) { var json = markerArr1[i]; var p0 = json.point.split("|")[0]; var p1 = json.point.split("|")[1]; var point = new BMap.Point(p0, p1); var iconImg = createIcon(json.icon); var marker = new BMap.Marker(point, { icon: iconImg }); var iw = createInfoWindow1(i); var label = new BMap.Label(json.title, { "offset": new BMap.Size(json.icon.lb - json.icon.x + 10, -20) }); marker.setLabel(label); map.addOverlay(marker); label.setStyle({ borderColor: "#808080", color: "#333", cursor: "pointer" }); (function () { var index = i; var _iw = createInfoWindow1(i); var _marker = marker; _marker.addEventListener("click", function () { this.openInfoWindow(_iw); }); _iw.addEventListener("open", function () { _marker.getLabel().hide(); }) _iw.addEventListener("close", function () { _marker.getLabel().show(); }) label.addEventListener("click", function () { _marker.openInfoWindow(_iw); }) if (!!json.isOpen) { label.hide(); _marker.openInfoWindow(_iw); } })() } } function addMarker2() { for (var i = 0; i < markerArr2.length; i++) { var json = markerArr2[i]; var p0 = json.point.split("|")[0]; var p1 = json.point.split("|")[1]; var point = new BMap.Point(p0, p1); var iconImg = createIcon(json.icon); var marker = new BMap.Marker(point, { icon: iconImg }); var iw = createInfoWindow2(i); var label = new BMap.Label(json.title, { "offset": new BMap.Size(json.icon.lb - json.icon.x + 10, -20) }); marker.setLabel(label); map.addOverlay(marker); label.setStyle({ borderColor: "#808080", color: "#333", cursor: "pointer" }); (function () { var index = i; var _iw = createInfoWindow2(i); var _marker = marker; _marker.addEventListener("click", function () { this.openInfoWindow(_iw); }); _iw.addEventListener("open", function () { _marker.getLabel().hide(); }) _iw.addEventListener("close", function () { _marker.getLabel().show(); }) label.addEventListener("click", function () { _marker.openInfoWindow(_iw); }) if (!!json.isOpen) { label.hide(); _marker.openInfoWindow(_iw); } })() } } //鍒涘缓InfoWindow function createInfoWindow1(i) { var json = markerArr1[i]; var iw = new BMap.InfoWindow("" + json.title + "
" + json.content + "
"); return iw; } function createInfoWindow2(i) { var json = markerArr2[i]; var iw = new BMap.InfoWindow("" + json.title + "
" + json.content + "
"); return iw; } //鍒涘缓涓€涓狪con function createIcon(json) { var icon = new BMap.Icon("//api.map.baidu.com/lbsapi/creatmap/images/us_mk_icon.png", new BMap.Size(json.w, json.h), { imageOffset: new BMap.Size(-json.l, -json.t), infoWindowOffset: new BMap.Size(json.lb + 5, 1), offset: new BMap.Size(json.x, json.h) }) return icon; } initMap1(); //鍒涘缓鍜屽垵濮嬪寲鍦板浘 initMap2(); //鍒涘缓鍜屽垵濮嬪寲鍦板浘