vue調(diào)用高德地圖實(shí)例代碼
更新時(shí)間：2017年04月28日 08:49:30 作者：starWind
本篇文章主要介紹了vue調(diào)用高德地圖實(shí)例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
一. 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è)面直接引入
復(fù)制代碼 代碼如下:
還有一種是異步加載
<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" 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>
效果如圖：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Ubuntu22.04使用nginx部署vue前端項(xiàng)目的詳細(xì)教程
這篇文章主要給大家介紹了關(guān)于Ubuntu22.04使用nginx部署vue前端項(xiàng)目的詳細(xì)教程,使用nginx部署前端項(xiàng)目是一篇非常詳細(xì)的教程,旨在幫助初學(xué)者使用Nginx來(lái)部署前端項(xiàng)目,需要的朋友可以參考下2024-03-03
這篇文章主要為大家詳細(xì)介紹了Vue?Canvas實(shí)現(xiàn)電子簽名，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了vue項(xiàng)目nginx二級(jí)域名配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要給大家介紹了Vue3自定義指令的相關(guān)資料,自定義指令是一種在Vue應(yīng)用程序中擴(kuò)展HTML標(biāo)簽的能力,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
element表格el-table實(shí)現(xiàn)虛擬滾動(dòng)解決卡頓問(wèn)題
當(dāng)頁(yè)面數(shù)據(jù)過(guò)多,前端渲染大量的DOM時(shí),會(huì)造成頁(yè)面卡死問(wèn)題,本文主要介紹了element表格el-table實(shí)現(xiàn)虛擬滾動(dòng)解決卡頓問(wèn)題,具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10
這篇文章主要介紹了vue3.0實(shí)現(xiàn)插件封裝的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了Vue中如何把hash模式改為history模式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
在Vue中實(shí)現(xiàn)二維碼生成與掃描功能的方法
二維碼是一種廣泛應(yīng)用于各種場(chǎng)合的編碼方式，它可以將信息編碼成一張二維圖案，方便快捷地傳遞信息，在Vue.js中，我們可以使用一些庫(kù)和組件來(lái)實(shí)現(xiàn)二維碼的生成和掃描，本文將介紹如何在Vue中實(shí)現(xiàn)二維碼的生成和掃描的方法2023-06-06
詳解vue修改elementUI的分頁(yè)組件視圖沒(méi)更新問(wèn)題
這篇文章主要介紹了詳解vue修改elementUI的分頁(yè)組件視圖沒(méi)更新問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要介紹了Vue toFixed保留兩位小數(shù)的3種方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10