在Vue中使用腾讯地图API

原创
2019/09/07 10:28
阅读数 1W

在Vue中使用腾讯地图API方式

一、使用在线引用腾讯地图api库(目前推荐这种方式)

在index.html中在线引用api库。

直接使用官方方式初始化地图处理即可。

更多详情参考官网:https://lbs.qq.com/javascript_v2/guide-base.html

 

二、使用库引入方式,按需加载方式引入API

这种方式推荐qqmap模块库。

说明:

腾讯地图模块(含几何计算类库)不包含convertor、place 等扩展类库

安装:

npm install qqmap --save

初始化:

var maps = require('qqmap')
maps.init('此处填写腾讯地图jsSDK 的 KEY', function() {
    console.log(maps)
})

代码示例:

<script>
var maps = require("qqmap");
maps.init("KD5BZ-MO4R4-PLNU4-XG2Q5-MBIFJ-27FT5", function() {
  var center = new maps.LatLng(39.916527, 116.397128);
  map = new maps.Map(document.getElementById("mapContainer"), {
    center: center,
    zoom: 13
  });

  //获取城市列表接口设置中心点
  // citylocation = new qq.maps.CityService({
  //   complete: function(result) {
  //     map.setCenter(result.detail.latLng);
  //     //添加标记
  //     marker = new qq.maps.Marker({
  //       position: result.detail.latLng,
  //       draggable: true,
  //       map: map
  //     });
  //     //添加到提示窗
  //     var info = new qq.maps.InfoWindow({
  //       map: map
  //     });
  //     qq.maps.event.addListener(marker, "mouseup", function(e) {
  //       //获取经纬度 e.latLng
  //       //获取坐标 e.cursorPixel
  //       info.open();
  //       info.setContent(
  //         '<div style="text-align:center;white-space:nowrap;' +
  //           'margin:10px;">坐标:' +
  //           e.latLng.lat +
  //           "," +
  //           e.latLng.lng +
  //           "</div>"
  //       );
  //       info.setPosition(e.latLng);
  //       //拖动的位置
  //       console.info(e.latLng);
  //     });
  //   }
  // });
  // //调用searchLocalCity();方法    根据用户IP查询城市信息。
  // citylocation.searchLocalCity();

  navigator.geolocation.getCurrentPosition(
    function(position) {
      var lat = position.coords.latitude;
      var lng = position.coords.longitude;
      //直接使用GPS坐标有点误差
      map.setCenter(new qq.maps.LatLng(lat, lng));
      var marker = new qq.maps.Marker({
        map: map,
        position: new qq.maps.LatLng(lat, lng)
      });

      // //将GPS坐标转换成腾讯地图坐标,当前vue版本不支持没有打包对应类库
      // //调用地图命名空间中的转换接口   type的可选值为 1:GPS经纬度,2:搜狗经纬度,3:百度经纬度,4:mapbar经纬度,5:google经纬度,6:搜狗墨卡托
      // qq.maps.convertor.translate(new qq.maps.LatLng(lat, lng), 1, function(
      //   res
      // ) {
      //   //取出经纬度并且赋值
      //   latlng = res[0];
      //   map.setCenter(latlng);
      //   //设置marker标记
      //   var marker = new qq.maps.Marker({
      //     map: map,
      //     position: latlng
      //   });
      // });
    },
    function(err) {
      console.error(err);
    }
  );
});
</script>

 

 

更多:

ElementUI 如何全局配置组件默认属性

Vue数组元素双向绑定,修改数组元素后视图不更新问题

在vue中使用echarts的自定义主题

展开阅读全文
加载中
点击加入讨论🔥(2) 发布并加入讨论🔥
打赏
2 评论
0 收藏
1
分享
返回顶部
顶部