vue中使用腾讯地图(修正篇)

开始

地图是怎样的？
有个地图，地点标注，点击标注显示信息提示，再加上列表联动与点击跳转功能。
定义变量来存储

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)
},

网站导航

网站导航