vue接入腾讯地图(一)【点击事件】
2020/9/5 14:03:40
本文主要是介绍vue接入腾讯地图(一)【点击事件】,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1、【调用展示】
在https://lbs.qq.com/guides/startup.html申请一个key
//先在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()
;
完整案例
//先在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/130...
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
这篇关于vue接入腾讯地图(一)【点击事件】的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30毕设私活神器
- 2024-05-30html
- 2024-05-09一定要避坑:关于微信H5分享,温馨提示你不要再踩坑了!!!
- 2024-05-09本地项目放到公网访问!炒鸡煎蛋!
- 2024-04-07金融企业区域集中库的设计构想和测试验证
- 2024-03-11前端CSS的工程化——掌握Sass这四大特性就够了
- 2024-02-21h5关联css样式(html怎么和css关联)-icode9专业技术文章分享
- 2024-02-07Firefox禁止远程字体加速网页加载及图标字体补充安装
- 2024-02-07一个菜鸡前端的3年总结-「2023」
- 2024-01-18最火前端Web组态软件(可视化)