引入

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

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

单个标注点

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

initMap (latitude, longitude, message) {

//中心坐标varcenter=newqq.maps.LatLng(latitude,longitude);varmap=newqq.maps.Map(document.getElementById("container"),{center:center,//缩放级别zoom:13});//创建标记varmarker=newqq.maps.Marker({//标记的位置position:center,map:map});//提示窗varinfo=newqq.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) {

//默认以数组第一项为中心varcenter=newqq.maps.LatLng(arr[0].latitude,arr[0].longitude);varmap=newqq.maps.Map(document.getElementById("container"),{center:center,zoom:13});//提示窗varinfo=newqq.maps.InfoWindow({map:map});for(vari=0;i

${this.name}

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