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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Ubuntu22.04使用nginx部署vue前端項目的詳細教程
這篇文章主要給大家介紹了關于Ubuntu22.04使用nginx部署vue前端項目的詳細教程,使用nginx部署前端項目是一篇非常詳細的教程,旨在幫助初學者使用Nginx來部署前端項目,需要的朋友可以參考下2024-03-03
這篇文章主要為大家詳細介紹了Vue?Canvas實現(xiàn)電子簽名，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了vue項目nginx二級域名配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要給大家介紹了Vue3自定義指令的相關資料,自定義指令是一種在Vue應用程序中擴展HTML標簽的能力,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-09-09
element表格el-table實現(xiàn)虛擬滾動解決卡頓問題
當頁面數(shù)據(jù)過多,前端渲染大量的DOM時,會造成頁面卡死問題,本文主要介紹了element表格el-table實現(xiàn)虛擬滾動解決卡頓問題,具有一定的參考價值,感興趣的可以了解一下2023-10-10
這篇文章主要介紹了vue3.0實現(xiàn)插件封裝的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了Vue中如何把hash模式改為history模式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
二維碼是一種廣泛應用于各種場合的編碼方式，它可以將信息編碼成一張二維圖案，方便快捷地傳遞信息，在Vue.js中，我們可以使用一些庫和組件來實現(xiàn)二維碼的生成和掃描，本文將介紹如何在Vue中實現(xiàn)二維碼的生成和掃描的方法2023-06-06
這篇文章主要介紹了詳解vue修改elementUI的分頁組件視圖沒更新問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
這篇文章主要介紹了Vue toFixed保留兩位小數(shù)的3種方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10