- 在vue-cli脚手架搭建的vue项目里使用到了腾讯地图。看了腾讯地图的官方给出的API(https://lbs.qq.com/javascript_v2/index.html)敲了一遍代码,才有点感觉写一个总结点的东西。
- 使用前需要在index.html里引入<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>才可以使用地图。我想的是(还没开始使用)单独封装成一个组件,使用的时候再在父组件里引用;以下都是在地图组件文件(如map.vue)里写的内容。
- 1、模板里通过给了id(为container)的div来承载地图;
在页面挂载时就要加载地图,所以在<script>里要先初始化地图,即
mounted () {
this.init()
}
接着在methods里写init方法(以下内容都是写在init里的)。
- 2、开始创建地图实例,并为其添加事件、添加标记、添加信息窗口、覆盖物、以及搜索poi(如酒店的位置)、驾车线路方案、地址解析。(标记聚合点看了但不清楚用途并且感觉项目里也不会用,所以没有写出来)
//创建地图实例
var map=new qq.maps.Map(document.getElement('container'),{
center,//坐标,即最初显示的地图中心
zoom //缩放级别,即显示的比例
})
//给地图添加事件,可以click、mouseover、mouseout等,这样的事件也可添加到marker、polyline上,即map的位置换了即可
qq.maps.event.addListener(map,'click',function(res){
//res即点击后的位置信息
})
//添加标记
var marker=new qq.ma