vue2使用高德地图添加marker点及marker点的鼠标事件,地图浮窗展示
1.添加地图
这里使用的是JSAPI key搭配静态安全密钥以明文设置
在index.html文件种引入高度地图
在要显示地图的vue文件中添加设置 JSAPI 安全密钥的脚本标签,并将填写您的安全密钥
window._AMapSecurityConfig = {
securityJsCode: '您的安全密钥'
}
地图容器设置宽高,初始化地图, 设置完毕地图即可加载完成
// 初始化地图
data () {
return {
map: null,
marker: null,
}
},
mounted () { this.initMap()},
methods: {
initMap () {
console.log('初始化地图')
this.map = new window.AMap.Map('map', {
resizeEnable: true, // 是否监控地图容器尺寸变化
center: [120.132547,33.456318], // 地图中心点,按照自己要求设置即可
zoom: 10// 地图缩放级别
})
},
}
2.通过接口获取数据动态添加marker点
先通过接口获取数据回调,拿到数据后进行marker点创建
API.getData(sendData).then(res => {
let resData = res.data.data // 获取数据
// 先清除以往marker点位
if (this.marker) {
this.marker.forEach(item => {
item.setMap(null)
})
}
resData.forEach(item => {
// 创建marker点
let marker = new window.AMap.Marker({
position: [item.longitude, item.latitude],
zIndex: 101,
icon: path, // 这里可以显示自定义的图片,但是图片路径只能用base64否则不展示,可以通require引入
content: `<div class='vehicleNumBox'>
<div class='vehicleNum'>点位名称</div>
<img src="${path}">
</div>`,
map: this.map
})
// marker点注入到地图
marker.setMap(_this.map)
// 添加marker点鼠标事件
// 鼠标移动到marker点位触发
marker.on('mouseover', function (e) {
// 显示这个marker点详细信息的浮窗,这个要放单独方法调用才能显示,暂时不明白为什么,直接把方法内的东西写在下面浮窗并不显示
this.showInfoWindow(item, e)
})
// 鼠标移出marker点位触发
marker.on('mouseout', function (e) {
this.map.clearInfoWindow() // 关闭详细信息的浮窗,地图方法
})
// 鼠标点击marker触发
marker.on('click', function (e) {
this.openCar(item) //
})
// 将所有marker点暂存到本地,可以供后续显示隐藏marker使用,不用每次都创建
this.marker.push(marker)
})
})
3.添加marker点上的浮窗
// 绘制弹窗
showInfoWindow (data, e) {
let infoWindow
let info = []
// 组成一个要显示的dom,class可以增加对应的css,不过要加scoped可能不起作用,加scoped的话,less或者sass 可以用deep
info.push('<ul class="input-card content-window-card">')
info.push(`<li> 信息1:${data.info1}</li>`)
info.push(`<li>信息2:${data.info2}</li>`)
info.push(`<li>信息3:${data.info3}</li>`)
info.push(`<li>信息4:${data.info4}</li>`)
info.push('</ul>')
// 创建浮窗
infoWindow = new window.AMap.InfoWindow({
isCustom: true,
offset: new window.AMap.Pixel(26, -5), // 偏移量
content: info.join('') // 使用默认信息窗体框样式,显示信息内容
})
infoWindow.open(this.map, e.lnglat) // 打开弹窗
},