vue調(diào)用高德地圖實例代碼
更新時間：2017年04月28日 08:49:30 作者：starWind
本篇文章主要介紹了vue調(diào)用高德地圖實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
一. vue-amap，一個基于 Vue 2.x 和高德地圖的地圖組件 https://elemefe.github.io/vue-amap/#/
這個就不細說了，按照其文檔，就能夠安裝下來。
二. 按照官方提供的方法引入
1.修改webpac.base.conf.js文件
externals: {
'AMap': 'AMap'
}
2.引入sdk
引入有兩種方式，一種是頁面直接引入
復制代碼 代碼如下:
還有一種是異步加載
<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>
需要注意的是：
你也可以去動態(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之后
這樣，在第三步的時候，才不會報錯
三. 在當前需要加載vue頁面引入
import AMap from 'AMap'
四. 頁面實例
這是初始化地圖，并且調(diào)用插件的代碼（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>
效果如圖：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue中import from@符號指的是意思,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue-cli3配置多項目并按項目分別實現(xiàn)打包方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了Vue全局組件與局部組件的區(qū)別，通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06
這篇文章主要介紹了vue-cli3 從搭建到優(yōu)化的詳細步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要為大家介紹了vite中使用@配置路徑別名過程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
文章介紹了一個Vue組件,該組件允許用戶通過鼠標右鍵在畫布上繪制矩形,并且支持通過Ctrl鍵進行多選,文章附帶了組件代碼和一個示例,建議讀者將代碼復制到自己的開發(fā)環(huán)境中進行調(diào)試2024-12-12
組件（Component）是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。這篇文章主要介紹了vue.js 中的組件，需要的朋友參考下2018-02-02
Vue中keyup.enter和blur事件沖突的問題及解決
這篇文章主要介紹了Vue中keyup.enter和blur事件沖突的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue-cli配置flexible過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-07-07
Electron相當于一個瀏覽器的外殼,可以把現(xiàn)有的vue程序嵌入到殼里面,下面這篇文章主要給大家介紹了關于如何使用electron將vue項目打包成exe的相關資料,需要的朋友可以參考下2023-01-01