横沥镇网站仿做,佛山市,做网站好还是小程序好,软件和网站开发// loadBMap.js ak 百度key
export default function loadBMap(ak) {return new Promise((resolve, reject) {//聚合API依赖基础库,因此先加载基础库再加载聚合APIasyncLoadBaiduJs(ak).then(() {// 调用加载第三方组件js公共方法加载其他资源库// 加载聚合API// Ma…// loadBMap.js ak 百度key
export default function loadBMap(ak) {return new Promise((resolve, reject) {//聚合API依赖基础库,因此先加载基础库再加载聚合APIasyncLoadBaiduJs(ak).then(() {// 调用加载第三方组件js公共方法加载其他资源库// 加载聚合API// MarkerClusterer_min.js依赖TextIconOverlay.js。因此先加载TextIconOverlay.jsasyncLoadJs(http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay.js).then(() {asyncLoadJs(http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js).then(() {asyncLoadJs(http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.js).then(() {resolve()return true}).catch(err {reject(err)})}).catch(err {reject(err)})}).catch(err {reject(err)})}).catch(err {reject(err)})})
}
// 加载百度地图基础组件js
export function asyncLoadBaiduJs(ak) {return new Promise((resolve, reject) {if (typeof BMap ! undefined) {resolve(BMap)return true}window.onBMapCallback function() {resolve(BMap)}let script document.createElement(script)script.type text/javascriptscript.src http://api.map.baidu.com/api?v3.0ak ak s1callbackonBMapCallbackscript.onerror rejectdocument.head.appendChild(script)})
}
// 加载第三方组件js公共方法
export function asyncLoadJs(url) {return new Promise((resolve, reject) {let script document.createElement(script)script.type text/javascriptscript.src urldocument.head.appendChild(script)script.onload () {resolve()}script.onerror reject})
}// import loadBMap from /utils/loadBMap.js
initMapc() {let that thisloadBMap(百度key).then(() {map new BMap.Map(mapContainer)const centerPoint new BMap.Point(that.longitude, that.latitude)map.centerAndZoom(centerPoint, that.zoom)// 添加缩放控件map.addControl(new BMap.NavigationControl());markerArr [];that.parkList.forEach(item {let point new BMap.Point(item.longitude, item.latitude);let marker new BMap.Marker(point);marker.id item.id;marker.title item.name;marker.address item.address// 添加标签const opts {position: point, // 指定文本标注所在的地理位置offset: new BMap.Size(8, -30) // 设置文本偏移量};// 创建文本标注对象let c div stylebackground: #fff;padding: 6px 8px;border-radius: 4px div styledisplay: flex;align-items: center; span stylecolor: #333;font-size:14px item.name /span /div div stylefont-size: 12px;color: rgb(153, 153, 153);margin-top:2px; item.address /div /divconst label new BMap.Label(c, opts);// 自定义文本标注样式label.setStyle({color: #000,fontSize: 12px,fontFamily: 微软雅黑,border: 0,padding: 0,// ointerEvents: none // 设置文本标签不接受鼠标事件});// 将标签添加到地图中// map.addOverlay(label);// 添加信息窗口marker.addEventListener(click, function() {// alert(Marker ID: ${marker.id}, Title: ${marker.title});that.navigateTo(/pages/shop/packageList?id marker.id name marker.title)});label.addEventListener(click, function(e) {// alert(您点击了文本标签);// console.log(e)// console.log(marker.id)that.navigateTo(/pages/shop/packageList?id marker.id name marker.title)});label.setZIndex(999); // 设置zIndex属性marker.setLabel(label);markerArr.push(marker);map.addOverlay(marker);})var markerClusterer new BMapLib.MarkerClusterer(map, {markers: markerArr})// 监听地图移动、放大缩小事件map.addEventListener(movestart, function(){markerClusterer.getMarkers().forEach(marker {// console.log(marker.id)let c div stylebackground: #fff;padding: 6px 8px;border-radius: 4px div styledisplay: flex;align-items: center; span stylecolor: #333;font-size:14px marker.title /span /div div stylefont-size: 12px;color: rgb(153, 153, 153);margin-top:2px; marker.address /div /divconst label new BMap.Label(c, {position: marker.getPosition(),offset: new BMap.Size(20, -10)});label.setStyle({color: #000,fontSize: 12px,fontFamily: 微软雅黑,border: 0,padding: 0,});marker.setLabel(label);map.addOverlay(marker);label.addEventListener(click, function(e) {// alert(您点击了文本标签);// console.log(e)// console.log(marker.id)that.navigateTo(/pages/shop/packageList?id marker.id name marker.title)});})});map.addEventListener(moveend, function(){markerClusterer.getMarkers().forEach(marker {// console.log(marker.id)let c div stylebackground: #fff;padding: 6px 8px;border-radius: 4px div styledisplay: flex;align-items: center; span stylecolor: #333;font-size:14px marker.title /span /div div stylefont-size: 12px;color: rgb(153, 153, 153);margin-top:2px; marker.address /div /div// // 添加文本标签到每个 marker 上// const label new BMap.Label(c, {// position: marker.getPosition(),// offset: new BMap.Size(20, -10)// });const label new BMap.Label(c, {position: marker.getPosition(),offset: new BMap.Size(20, -10)});label.setStyle({color: #000,fontSize: 12px,fontFamily: 微软雅黑,border: 0,padding: 0,});marker.setLabel(label);map.addOverlay(marker);label.addEventListener(click, function(e) {// alert(您点击了文本标签);// console.log(e)// console.log(marker.id)that.navigateTo(/pages/shop/packageList?id marker.id name marker.title)});})});map.addEventListener(zoomstart, function(){markerClusterer.getMarkers().forEach(marker {// console.log(marker.id)let c div stylebackground: #fff;padding: 6px 8px;border-radius: 4px div styledisplay: flex;align-items: center; span stylecolor: #333;font-size:14px marker.title /span /div div stylefont-size: 12px;color: rgb(153, 153, 153);margin-top:2px; marker.address /div /div// // 添加文本标签到每个 marker 上// const label new BMap.Label(c, {// position: marker.getPosition(),// offset: new BMap.Size(20, -10)// });const label new BMap.Label(c, {position: marker.getPosition(),offset: new BMap.Size(20, -10)});label.setStyle({color: #000,fontSize: 12px,fontFamily: 微软雅黑,border: 0,padding: 0,});marker.setLabel(label);map.addOverlay(marker);label.addEventListener(click, function(e) {// alert(您点击了文本标签);// console.log(e)// console.log(marker.id)that.navigateTo(/pages/shop/packageList?id marker.id name marker.title)});})});map.addEventListener(zoomend, function(){markerClusterer.getMarkers().forEach(marker {// console.log(marker.id)let c div stylebackground: #fff;padding: 6px 8px;border-radius: 4px div styledisplay: flex;align-items: center; span stylecolor: #333;font-size:14px marker.title /span /div div stylefont-size: 12px;color: rgb(153, 153, 153);margin-top:2px; marker.address /div /div// // 添加文本标签到每个 marker 上// const label new BMap.Label(c, {// position: marker.getPosition(),// offset: new BMap.Size(20, -10)// });const label new BMap.Label(c, {position: marker.getPosition(),offset: new BMap.Size(20, -10)});label.setStyle({color: #000,fontSize: 12px,fontFamily: 微软雅黑,border: 0,padding: 0,});marker.setLabel(label);map.addOverlay(marker);label.addEventListener(click, function(e) {// alert(您点击了文本标签);// console.log(e)// console.log(marker.id)that.navigateTo(/pages/shop/packageList?id marker.id name marker.title)});})});})},
