vue 引入騰訊地圖
阿新 • • 發佈:2021-12-10
//如果在根目錄沒找到 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); },