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

黑猫之家原创文章

来黑猫之家看看呗

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Copyright © 2015-2019 | 黑猫吧(www.heimaoba.cn) | 赣ICP备18005425号-1 |