1、【调用展示】
在https://lbs.qq.com/guides/startup.html申请一个key
代码语言：txt复制//先在vue的index.html里面引入腾讯地图包
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=yourkey"></script>
//.vue
<template>
<div>
<div id="container" style="width:600px;height:500px;"></div>
</div>
</template>
<script>
export default{
mounted() {
this.init();
},
methods:{
init() {
//步骤：定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器
//设置地图中心点
var myLatlng = new qq.maps.LatLng(39.916527,116.397128);
//定义工厂模式函数
var myOptions = {
zoom: 8, //设置地图缩放级别
center: myLatlng, //设置中心点样式
mapTypeId: qq.maps.MapTypeId.ROADMAP //设置地图样式详情参见MapType
}
//获取dom元素添加地图信息
var map = new qq.maps.Map(document.getElementById("container"), myOptions);
}
}
}
</script>效果图
2、【地图中添加点击事件】
- 添加点击事件
qq.maps.event.addListener(map, 'click', function(event) { alert("你点击了地图"); }); - 点击事件中获取经度
this.longitude = event.latLng.getLat(); - 点击事件中获取纬度
this.latitude = event.latLng.getLng();
完整案例
代码语言：txt复制//先在vue的index.html里面引入腾讯地图包
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=yourkey"></script>
//.vue
<template>
<div>
<div id="container" style="width:600px;height:500px;"></div>
</div>
</template>
<script>
export default{
name:'news',
data() {
return {
longitude:39.916527,//经度
latitude:116.397128//纬度
}
},
methods:{
init() {
//步骤：定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器
//设置地图中心点
var myLatlng = new qq.maps.LatLng(this.longitude,this.latitude);
//定义工厂模式函数
var myOptions = {
zoom: 8, //设置地图缩放级别
center: myLatlng, //设置中心点样式
mapTypeId: qq.maps.MapTypeId.ROADMAP //设置地图样式详情参见MapType
}
//获取dom元素添加地图信息
var map = new qq.maps.Map(document.getElementById("container"), myOptions);
//给地图添加点击事件
//并获取鼠标点击的经纬度
qq.maps.event.addListener(map, 'click', function(event) {
this.longitude = event.latLng.getLat();
this.latitude = event.latLng.getLng();
alert("经度:" this.longitude "," "纬度:" this.latitude);
});
}
},
mounted() {
this.init();
}
}
</script>效果图
以上内容转载自前端来入坑的文章《vue使用腾讯地图（一）》
链接：https://www.jianshu.com/p/130cdbd07394
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
