1. 程式人生 > 其它 >vue 引入騰訊地圖

vue 引入騰訊地圖

//如果在根目錄沒找到 index.html ,那你的專案可能是用 vue-cli 搭建的。 在 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>

從頭到尾複製進去就行了。

<div id="container" style="width:600px;height:500px;"></div>
//初始化地圖
    initMap(){

      //步驟:定義map變數 呼叫 qq.maps.Map() 建構函式   獲取地圖顯示容器
      //設定地圖中心點
      var myLatlng = new qq.maps.LatLng(39.916527,116.397128);
      //定義工廠模式函式
      var myOptions = {
        zoom: 8,               //設定地圖縮放級別
center: myLatlng, //設定中心點樣式 mapTypeId: qq.maps.MapTypeId.ROADMAP //設定地圖樣式詳情參見MapType } //獲取dom元素新增地圖資訊 var map = new qq.maps.Map(document.getElementById("container"), myOptions); },