// 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/javascript' script.src = 'http://api.map.baidu.com/api?v=3.0&ak=' + ak + '&s=1&callback=onBMapCallback' script.onerror = rejectdocument.head.appendChild( script) } )
}
// 加载第三方组件js公共方法
export function asyncLoadJs( url) { return new Promise(( resolve, reject) = > { let script = document.createElement( 'script' ) script.type = 'text/javascript' script.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 style='background: #fff;padding: 6px 8px;border-radius: 4px'>" +"<div style='display: flex;align-items: center;'> <span style='color: #333;font-size:14px'>" +item.name +" " +"</span>" +"</div>" +"<div style='font-size: 12px;color: rgb(153, 153, 153);margin-top:2px;'>" +item.address + "</div>" + "</div>" const 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 style='background: #fff;padding: 6px 8px;border-radius: 4px'>" +"<div style='display: flex;align-items: center;'> <span style='color: #333;font-size:14px'>" +marker.title +" " +"</span>" +"</div>" +"<div style='font-size: 12px;color: rgb(153, 153, 153);margin-top:2px;'>" +marker.address + "</div>" + "</div>" 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( "moveend" , function ( ) { markerClusterer.getMarkers( ) .forEach( marker = > { // console.log( marker.id) let c = "<div style='background: #fff;padding: 6px 8px;border-radius: 4px'>" +"<div style='display: flex;align-items: center;'> <span style='color: #333;font-size:14px'>" +marker.title +" " +"</span>" +"</div>" +"<div style='font-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 style='background: #fff;padding: 6px 8px;border-radius: 4px'>" +"<div style='display: flex;align-items: center;'> <span style='color: #333;font-size:14px'>" +marker.title +" " +"</span>" +"</div>" +"<div style='font-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 style='background: #fff;padding: 6px 8px;border-radius: 4px'>" +"<div style='display: flex;align-items: center;'> <span style='color: #333;font-size:14px'>" +marker.title +" " +"</span>" +"</div>" +"<div style='font-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) } ) ; } ) } ) ; } ) } ,