引入
在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 = this
function lookDetail (item) {
that.$router.push({
name: 'contentDetail',
query: {
id: item.id,
}
});
}
最后，我发现点击标注跳转下个页面出了问题，在setContent中加了点击跳转的按钮后，发现要不然就是不能跳转，要不然就是点击蓝色标注按钮就直接跳转走了，不会打开显示信息。所以，这么写是不对的。
