vue项目中加载使用腾讯地图

在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.maps.Marker({

position,//标记点的位置，也可以是通过IP获取到的坐标

map,//标记在哪个地图上

animation,//标记显示时的动画效果

title,//鼠标悬浮到标记上时的标题