// loadBMap.js ak 百度key
export default function loadBMap( ak) {
return new Promise(( resolve, reject) = > {
//聚合API依赖基础库,因此先加载基础库再加载聚合API
asyncLoadBaiduJs( ak)
.then(( ) = > {
// 调用加载第三方组件js公共方法加载其他资源库
// 加载聚合API
// MarkerClusterer_min.js依赖TextIconOverlay.js。因此先加载TextIconOverlay.js
asyncLoadJs( '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 = reject
document.head.appendChild( script)
} )
}
// 加载第三方组件js公共方法
export function asyncLoadJs( url) {
return new Promise(( resolve, reject) = > {
let script = document.createElement( 'script' )
script.type = 'text/javascript'
script.src = url
document.head.appendChild( script)
script.onload = ( ) = > {
resolve( )
}
script.onerror = reject
} )
}
// import loadBMap from '@/utils/loadBMap.js'
initMapc ( ) {
let that = this
loadBMap( '百度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)
} ) ;
} )
} ) ;
} )
} ,
