vue中使用腾讯地图(尝试篇)

和黑猫之家聊聊?

引入

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

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=XXX"></script>

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

<div id="container"></div>

单个标注点

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(`<div style="margin:10px;">${message}</div>`);
        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(`<div><p>${this.name}</p></div>`);
            // 提示窗位置 
            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(`<div><p>${this.name}</p></div>`);
            info.setPosition(new qq.maps.LatLng(this.position.lat, this.position.lng));
        });
    }
    // 当前点击列表项在地图上显示对应的标注提示
    info.open();
    info.setContent(`<div><p>${listItem.name}</p></div>`);
    info.setPosition(new qq.maps.LatLng(listItem.latitude, listItem.longitude));}

跳转

qq.maps.event.addListener(marker, 'click', function() {
    info.open();
    info.setContent(`<div>
                        <p>${this.name}</p>
                        <p onclick="${lookDetail(this)}" style="cursor: pointer;">查看</p>
                    </div>`);
    info.setPosition(new qq.maps.LatLng(this.position.lat, this.position.lng));});var that = thisfunction lookDetail (item) {
    that.$router.push({
        name: 'contentDetail',
        query: {
            id: item.id,
        }
    });}

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

微信搜索小程序黑猫之家看更多资讯哦

来黑猫之家看看呗

发表评论:

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

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