开始
地图是怎样的？
有个地图，地点标注，点击标注显示信息提示，再加上列表联动与点击跳转功能。
定义变量来存储
data: {
// 地图
mapView: '',
// 信息提示框
mapInfoWindow: '',
// 标注点数组
markersArray: [],
// 地图数据
mapData: []
},地图数据格式
在每次赋值前清空数组，获取数据后赋值。
mapData: [
{
"id":1,
"name":"北京后海酒店",
"latitude":"39.92300000",
"longitude":"116.5200000000"
},
{
"id":2,
"name":"北京七天酒店",
"latitude":"39.9254100000",
"longitude":"116.5220000000"
}
]初始化
初始化
initMap (arr) {
// 创建地图，设置地图中心点
let center = new qq.maps.LatLng(arr[0].latitude, arr[0].longitude)
if (this.mapView) {
this.mapView.setCenter(center)
} else {
this.mapView = new qq.maps.Map(
document.getElementById('container'),
{
center: center,
zoom: 13
}
)
// 创建信息提示窗
this.mapInfoWindow = new qq.maps.InfoWindow({
map: this.mapView
})
}
arr.map(item => {
// 创建标记
let marker = new qq.maps.Marker({
position: new qq.maps.LatLng(item.latitude, item.longitude),
map: this.mapView,
// 将数据信息赋值给marker的data属性，用做点击显示与跳转
data: item
})
// 获取标记的点击事件
qq.maps.event.addListener(marker, 'click', (e) => {
this.mapInfoWindow.open()
this.mapInfoWindow.setContent(this.createInfoWindowContent(e.target.data))
this.mapInfoWindow.setPosition(e.latLng) //提示窗位置
})
// 存放所有marker
this.markersArray.push(marker)
})
},点击查看详情
// 创建地图标记弹出框信息createInfoWindowContent (item) {
let href = window.location.origin + '/content-detail?hotelId=' + item.id
// + '&orderType=' + item.orderType (拼接其他参数)
return `<div style="width: 380px;overflow: hidden;">
<p style="color: #333333;">${item.name}</p>
<a href="${href}">查看</a>
</div>`
},清空所有标注点
因为每次请求数据会产生不同的信息，所以要清空地图上的标注点，创建新的
// 清除已有的地图标记
clearOverlays() {
if (this.markersArray) {
this.markersArray.map(item => {
item.setMap(null)
})
}
},将这个方法加在初始化地图的最前方
initMap (arr) {
this.clearOverlays()
// ...其他代码},至此，初始化完成，功能实现。
列表地图联动
showMapMarker(listItem) {
this.clearOverlays()
let center = new qq.maps.LatLng(listItem.latitude, listItem.longitude)
this.mapView.setCenter(center)
this.mapData.map(item => {
let marker = new qq.maps.Marker({
position: new qq.maps.LatLng(item.latitude, item.longitude),
map: this.mapView,
data: item
})
qq.maps.event.addListener(marker, 'click', (e) => {
this.mapInfoWindow.open()
this.mapInfoWindow.setContent(this.createInfoWindowContent(e.target.data))
this.mapInfoWindow.setPosition(e.latLng)
})
this.markersArray.push(marker)
})
// 当前点击的列表项显示对应标注
this.mapInfoWindow.open()
let listItemTemp = {
name: listItem.name,
id: listItem.id
}
this.mapInfoWindow.setContent(this.createInfoWindowContent(listItemTemp))
this.mapInfoWindow.setPosition(center)
},
