在vue中使用腾讯地图,
1、首先去申请一个key,可以在https://lbs.qq.com/这个网站里申请。打开是下图这个样子的。
2、点击登录,绑定一些信息,手机号之类的,随后点进开发者信息里,如下图
3、点击key管理,创建新密钥,填写相应信息即可
4、申请成功后是这样的-(五位一组,共六组)
5、在vue中引用腾讯地图
即在index.html文件中引入
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=
换成你申请的key"></script>
6、下面是创建地图标签
<div id="map"></div>
7、初始化地图
let address=“”
var center = new qq.maps.LatLng(
34.754152,
113.667636
);
var map = new qq.maps.Map(document.getElementById(‘map), {
center: center,
zoom: 13,
disableDefaultUI: true
});
var marker = new qq.maps.Marker({
position: center,
map: map
});
var infoWin = new qq.maps.InfoWindow({
map: map
});
//此处是点击地图后生成的地标名称
var geocoder = new qq.maps.Geocoder({
complete: function(res) {
console.log(res);
address = res.detail.nearPois[0].name;//这里是你点击之处根据经纬度返回的地点名称
}
});
qq.maps.event.addListener(map, "click", function(event) {
this.longiistude = eveisnt.latLng.getLat();
this.latitude = event.latLng.getLng();
console.log(event);
let lat = new qq.maps.LatLng(
this.longitude,
this.latitude
);
geocoder.getAddress(lat);
setTimeout(() => {
infoWin.open();
infoWin.setContent(
'<div style="text-align:center;white-space:nowrap;">' +
address +
"</div>"
); //这里是标记之处的样式
infoWin.setPosition(event.latLng);
}, 200);
});
8、最后的效果如图
9、完整代码
<template>
<div>
<div id="map" style="width:500px;height:400px;"></div>
</div>
</template>
<script>
export default {
data() {
return {
longitude: "",
latitude: ""
};
},
methods: {
init() {
let address = "";
let that = this;
var center = new qq.maps.LatLng(34.754152, 113.667636);
var map = new qq.maps.Map(document.getElementById('map'), {
center: center,
zoom: 13,
disableDefaultUI: true
});
var marker = new qq.maps.Marker({
position: center,
map: map
});
var infoWin = new qq.maps.InfoWindow({
map: map
});
var geocoder = new qq.maps.Geocoder({
complete: function(res) {
console.log(res);
address = res.detail.nearPois[0].name;
}
});
qq.maps.event.addListener(map, "click", function(event) {
this.longitude = event.latLng.getLat();
this.latitude = event.latLng.getLng();
console.log(event);
let lat = new qq.maps.LatLng(this.longitude, this.latitude);
geocoder.getAddress(lat);
setTimeout(() => {
infoWin.open();
infoWin.setContent(
'<div style="text-align:center;white-space:nowrap;">' +
address +
"</div>"
);
infoWin.setPosition(event.latLng);
}, 200);
});
}
},
mounted() {
this.init();
}
};
</script>
<style scoped>
</style>