vue專案引入百度地圖多個位置寫法 (二)
阿新 • • 發佈:2019-01-12
標籤:
<div style="height:100%" id="map"></div>
鉤子函式:
methods: { //''''''''地。。。圖。。。代。。。碼'''''''''''''''''''''''''''''''''''' BaiduMap(){ this.map_init(); this.map_load() }, map_init() { var markerArr = [ { title: "名稱:廣州火車站", point: "113.264531,23.157003", address: "廣東省廣州市廣州火車站", tel: "12306" }, { title: "名稱:廣州塔(赤崗塔)", point: "113.330934,23.113401", address: "廣東省廣州市廣州塔(赤崗塔) ", tel: "18500000000" }, { title: "名稱:廣州動物園", point: "113.312213,23.147267", address: "廣東省廣州市廣州動物園", tel: "18500000000" }, { title: "名稱:天河公園", point: "113.372867,23.134274", address: "廣東省廣州市天河公園", tel: "18500000000" } ]; var map = new BMap.Map("map"); // 建立Map例項 var point = new BMap.Point(113.312213, 23.147267); //地圖中心點,廣州市 map.centerAndZoom(point, 13); // 初始化地圖,設定中心點座標和地圖級別。 map.enableScrollWheelZoom(true); //啟用滾輪放大縮小 //向地圖中新增縮放控制元件 var ctrlNav = new window.BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE }); map.addControl(ctrlNav); //向地圖中新增縮圖控制元件 var ctrlOve = new window.BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 }); map.addControl(ctrlOve); //向地圖中新增比例尺控制元件 var ctrlSca = new window.BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }); map.addControl(ctrlSca); var point = new Array(); //存放標註點經緯資訊的陣列 var marker = new Array(); //存放標註點物件的陣列 var info = new Array(); //存放提示資訊視窗物件的陣列 for (var i = 0; i < markerArr.length; i++) { var p0 = markerArr[i].point.split(",")[0]; // var p1 = markerArr[i].point.split(",")[1]; //按照原陣列的point格式將地圖點座標的經緯度分別提出來 point[i] = new window.BMap.Point(p0, p1); //迴圈生成新的地圖點 marker[i] = new window.BMap.Marker(point[i]); //按照地圖點座標生成標記 map.addOverlay(marker[i]); marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫 var label = new window.BMap.Label(markerArr[i].title, { offset: new window.BMap.Size(20, -10) }); marker[i].setLabel(label); info[i] = new window.BMap.InfoWindow("<p style=’font-size:12px;lineheight:1.8em;’>" + markerArr[i].title + "</br>地址:" + markerArr[i].address + "</br> 電話:" + markerArr[i].tel + "</br></p>"); // 建立資訊視窗物件 } marker[0].addEventListener("mouseover", function () { this.openInfoWindow(info[0]); }); marker[1].addEventListener("mouseover", function () { this.openInfoWindow(info[1]); }); marker[2].addEventListener("mouseover", function () { this.openInfoWindow(info[2]); }); }, //非同步呼叫百度js map_load() { var load = document.createElement("script"); load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init"; document.body.appendChild(load); } // window.onload = map_load; }, mounted(){ this.BaiduMap() } }