vue使用腾讯地图(二)事件
2018-10-10 本文已影响20人
前端来入坑
地图中添加点击事件
添加点击事件 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" 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
官方预览地址https://lbs.qq.com/javascript_v2/case-run.html#sample-event-click-remove