vue接入腾讯地图(一)【点击事件】

1、【调用展示】

在https://lbs.qq.com/guides/startup.html申请一个key

//先在vue的index.html里面引入腾讯地图包
<script charset="utf-8"></script>
//.vue
<template>
<div>
<div id="container"></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();

完整案例

//先在vue的index.html里面引入腾讯地图包
<script charset="utf-8"></script>
//.vue
<template>
<div>
<div id="container"></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接入腾讯地图(一)【点击事件】 的全部内容， 来源链接： utcz.com/a/42026.html

回到顶部