您好,登錄后才能下訂單哦!
一. vue-amap,一個(gè)基于 Vue 2.x 和高德地圖的地圖組件 https://elemefe.github.io/vue-amap/#/
這個(gè)就不細(xì)說(shuō)了,按照其文檔,就能夠安裝下來(lái)。
二. 按照官方提供的方法引入
1.修改webpac.base.conf.js文件
externals: { 'AMap': 'AMap' }
2.引入sdk
引入有兩種方式,一種是頁(yè)面直接引入
還有一種是異步加載
<script src="http://webapi.amap.com/maps?v=1.3&key=您申請(qǐng)的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>
需要注意的是:
你也可以去動(dòng)態(tài)去創(chuàng)造,例如這樣
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之后
這樣,在第三步的時(shí)候,才不會(huì)報(bào)錯(cuò)
三. 在當(dāng)前需要加載vue頁(yè)面引入
import AMap from 'AMap'
四. 頁(yè)面實(shí)例
這是初始化地圖,并且調(diào)用插件的代碼(map.vue)如:
<template> <div> <div id="container" ></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>
效果如圖:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。