vue中使用腾讯地图（尝试篇）

引入

在index.html文件中引入腾讯地图js文件，XXX为你申请的key

注意事项：为显示地图的元素设置宽高

单个标注点

js: 在mounted生命周期或者从后台接口获得信息后调用初始化地图方法

initMap (latitude, longitude, message) {
    // 中心坐标
    var center = new qq.maps.LatLng(latitude, longitude);
    var map = new qq.maps.Map(
        document.getElementById("container"),
        {
            center: center,
            // 缩放级别
            zoom: 13
        }
    );
    // 创建标记
    var marker = new qq.maps.Marker({
        // 标记的位置
        position: center,
        map: map
    });
    // 提示窗
    var info = new qq.maps.InfoWindow({
        map: map
    });
    // 悬浮标记显示信息
    qq.maps.event.addListener(marker, 'mouseover', function() {        
        info.open();
        info.setContent(`
${message}
`);
        info.setPosition(center);
    });
    qq.maps.event.addListener(marker, 'mouseout', function() {
        info.close();
    });
},

多个标注点

存放标注点数组的格式：

markers: [                 
    {
        "id":1,
        "name":"北京后海酒店",
        "latitude":"39.92300000",
        "longitude":"116.5200000000"
    },
    {
        "id":2,
        "name":"北京七天酒店",
        "latitude":"39.9254100000",
        "longitude":"116.5220000000"
    }
]

方法：

initMap (arr) {
    // 默认以数组第一项为中心
    var center = new qq.maps.LatLng(arr[0].latitude, arr[0].longitude);
    var map = new qq.maps.Map(
        document.getElementById("container"),
        {
            center: center,
            zoom: 13
        }
    );
    // 提示窗
    var info = new qq.maps.InfoWindow({
        map: map
    });
    for (var i = 0; i < arr.length; i++) {
        var data = arr[i];
        // 创建标记
        var marker = new qq.maps.Marker({ 
            position: new qq.maps.LatLng(data.latitude, data.longitude), 
            map: map 
        });
        // 将必要的数据存入每一个对应的marker对象
        marker.id = data.id;
        marker.name = data.name;
        // 为标记添加事件，这里可改为点击事件
        qq.maps.event.addListener(marker, 'mouseover', function() {
            info.open();
            // 设置提示窗内容（this指向marker对象）
            info.setContent(`
${this.name}
`);
            // 提示窗位置 
            info.setPosition(new qq.maps.LatLng(this.position.lat, this.position.lng));
        });
        qq.maps.event.addListener(marker, 'mouseout', function() {
            info.close();                    
        });
    }
}

调用时直接将数组传参就可以了，在mounted或调取接口后

mounted () {
    this.initMap(this.markers)
},

列表和地图联动

js:

showMapMarker (listItem) {
    // 重新渲染地图，以当前选中项经纬度为中心，显示所有标注点
    var center = new qq.maps.LatLng(listItem.latitude, listItem.longitude);
    var map = new qq.maps.Map(
        document.getElementById("container"),
        {
            center: center,
            zoom: 13
        }
    );
    var info = new qq.maps.InfoWindow({
        map: map
    });
    for (var i = 0; i < this.markers.length; i++) {
        var data = this.markers[i];
        var marker = new qq.maps.Marker({ 
            position: new qq.maps.LatLng(data.latitude, data.longitude), 
            map: map 
        });
        marker.id = data.id;
        marker.name = data.name;
        // 为标记添加点击事件
        qq.maps.event.addListener(marker, 'click', function() {
            info.open();
            info.setContent(`
${this.name}
`);
            info.setPosition(new qq.maps.LatLng(this.position.lat, this.position.lng));
        });
    }
    // 当前点击列表项在地图上显示对应的标注提示
    info.open();
    info.setContent(`
${listItem.name}
`);
    info.setPosition(new qq.maps.LatLng(listItem.latitude, listItem.longitude));
}

跳转

qq.maps.event.addListener(marker, 'click', function() {
    info.open();
    info.setContent(`

                        
${this.name}
                        
查看
                    
`);
    info.setPosition(new qq.maps.LatLng(this.position.lat, this.position.lng));
});
var that = this
function lookDetail (item) {
    that.$router.push({
        name: 'contentDetail',
        query: {
            id: item.id,
        }
    });
}

最后，我发现点击标注跳转下个页面出了问题，在setContent中加了点击跳转的按钮后，发现要不然就是不能跳转，要不然就是点击蓝色标注按钮就直接跳转走了，不会打开显示信息。所以，这么写是不对的。

推荐阅读

vue中使用腾讯地图（修正篇）

网站导航

网站导航