vue 騰訊地圖webServiceAPI 和 javaScriptAPI GL 的基本使用 （1）

之前是使用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 的地圖就出來了