vue 呼叫高德地圖
阿新 • • 發佈:2019-01-24
一. vue-amap,一個基於 Vue 2.x 和高德地圖的地圖元件 https ://ele mefe.gi thub.io/vue-a map/#/
這個就不細說了,按照其文件,就能夠安裝下來。
二. 按照官方提供的方法引入
1.修改webpac.base.conf.js檔案
externals: { 'AMap': 'AMap' }
2.引入sdk
引入有兩種方式,一種是頁面直接引入
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申請的key值"></script>
還有一種是非同步載入
<script src="http://webapi.amap.com/maps?v=1.3&key=您申請的key值&callback=init"></script> <script> function init(){ var map = new AMap.Map('container', { center: [117.000923, 36.675807], zoom: 6 }); map.plugin(["AMap.ToolBar"], function() { map.addControl(new AMap.ToolBar()); }); } </script>
需要注意的是:
你也可以去動態去創造,例如這樣
var script = document.createElement('script') script.type = 'text/javascript' script.src = 'https://webapi.amap.com/maps?v=1.3&key=yourKey' // 高德地圖 document.body.appendChild(script)
不管是採用哪種方式,都要保證你想要載入地圖的js檔案,在引入的sdk之後
這樣,在第三步的時候,才不會報錯
三. 在當前需要載入vue頁面引入
import AMap from 'AMap'
四. 頁面例項
這是初始化地圖,並且呼叫外掛的程式碼(map.vue)如:
<template> <div> <div id="container" style="width:500px; height:300px"></div> </div> </template> <script> import AMap from 'AMap' var map export default { mounted: function () { this.init() }, methods: { init: function () { map = new AMap.Map('container', { center: [116.397428, 39.90923], resizeEnable: true, zoom: 10 }) AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () { map.addControl(new AMap.ToolBar()) map.addControl(new AMap.Scale()) }) } } } </script> <style> </style>
效果如圖: