vue 腾讯地图webServiceAPI 和 javaScriptAPI GL 的基本使用

Posted 2020-12-13 敲代码的树先生

之前是使用javascriptAPI 来写地图需求的，着实是没有JavaScriptAPI GL 用的舒服，并且没GL 强大。（例如多个marker，进入地图需要自适应显示多个marker）GL 直接撸就完事儿（有示例）

 

1、webServiceAPI 请求接口会报跨域错误   上一篇记录有提到解决方法（jsonp请求）

2、 引入js文件    https://blog.csdn.net/f1370335844/article/details/106120689 我直接在index.html文件中引入貌似没啥问题  这篇文章 讲述了另外一种引入。为啥他不加载JS文件，我能加载就不太清楚了 

//这个地方的key注意换成自己的key哦~
<script src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>

3、初始化地图

　　我的步骤是：

　　　　　　　　1、根据ip获取当前位置的 经纬度

                             2、渲染地图

 html部分
<div id="container"></div>

  生命周期部分
// 负责渲染
mounted() {
 this.getMyLocation()
}

  method 部分
getMyLocation() {
  //这里是根据webserviceApi 根据ip 请求当前的经纬度
  const KEY = ‘这里填写你的key‘
  let url = ‘https://apis.map.qq.com/ws/location/v1/ip‘
  this.$jsonp(url, {
    key: KEY,
    output: ‘jsonp‘
  }).then(json => {
    // latitude longitude 自己定义，用来存放 当前的经纬度
    this.latitude = json.result.location.lat;
    this.longitude = json.result.location.lng;
　　 this.initMap()
    console.log(json)  //可以打印一下是啥样
  }).catch(error => {
    console.log(error)
  })
}

initMap() {
  var center = new TMap.LatLng(this.latitude, this.longitude)
  let   container = document.getElementById(‘container‘)
  var map = new TMap.Map(container, {
    center: center, //设置地图中心坐标
    zoom: 17, //设置地图缩放级别
    pitch: 43.5, //设置俯仰角
    rotation: 45 //设置地图旋转角度
  })
  
}        

根据你当前ip定位  为center 的地图就出来了