Vue引入腾讯地图

1. 在public目录下的index.html文件中加入以下代码

//引入腾讯地图服务
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key= 腾讯地图-控制台-添加应用生成的key "></script>
//引入腾讯地图的前端定位组件
<script src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>

2. 创建一个vue组件，在其中为地图添加一个容器

<div id="container" style="width:100%;height:300px;"></div>

3. 地图初始化文件如下

initMap(){
  //使用腾讯的前端定位组件，比浏览器中的HTML5 Geolocation定位能力强
  var geolocation = new qq.maps.Geolocation("自己的key", "组件名");
  geolocation.getLocation(onSuccess,onFail)
  function onSuccess(position){
    //步骤：定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
    //设置地图中心点
    var myLatlng = new qq.maps.LatLng(position.lat,position.lng);
    //定义工厂模式函数
    var myOptions = {
      zoom: 18,               //设置地图缩放级别
      center: myLatlng,      //设置中心点
      mapTypeId: qq.maps.MapTypeId.ROADMAP  //设置地图样式详情参见MapType
    }
    //获取dom元素添加地图信息
    var map = new qq.maps.Map(document.getElementById("container"), myOptions);

    //添加地图标点 => 单点
    var marker = new qq.maps.Marker({
      position: myLatlng ,
      map: map
    });
  }
}

4. 在create()中调用初始化方法
5. 效果如下