vue中使用百度地图为啥是空白_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 

${this.name}

`);            // 提示窗位置             info.setPosition(new qq.maps.LatLng(this.position.lat, this.position.lng));        });        qq.maps.event.addListener(marker, 'mouseout', function() {            info.close();                            });    }}