Vue 引入AMap高德地圖的實(shí)現(xiàn)代碼
更新時間：2019年04月29日 11:20:21 作者：Where
這篇文章主要介紹了Vue 引入AMap高德地圖的實(shí)現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
本文代碼僅針對 Vue CLI 3.x 生成的項(xiàng)目有效，但是在第二步配置的時候，可以直接配置 webpack.externals，所以本引入思路是通用的，并不局限于該項(xiàng)目
資源
引入 AMap
在 public/index.html 文件 </body> 前引入
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=您申請的key值"></script>
配置 Webpack
項(xiàng)目根目錄新建配置文件 vue.config.js，填入內(nèi)容：
module.exports = {
configureWebpack: {
externals: {
AMap: "window.AMap"
}
}
};
在項(xiàng)目中使用
新建 Index.vue 文件，填入內(nèi)容：
<template>
<div>
<div style="width: 100vw;height: 100vh" id="container"></div>
</div>
</template>
<script>
// eslint-disable-next-line
import AMap from "AMap";
export default {
name: "Index",
data() {
return {};
},
mounted() {
new AMap.Map("container", {
resizeEnable: true,
zoom: 11
});
}
};
</script>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue如何使用本地JSON文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue中使用highlight.js實(shí)現(xiàn)代碼高亮顯示以及點(diǎn)擊復(fù)制
本文主要介紹了Vue中使用highlight.js實(shí)現(xiàn)代碼高亮顯示以及點(diǎn)擊復(fù)制，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
vue中的el-tree @node-click傳自定義參數(shù)
這篇文章主要介紹了vue中的el-tree @node-click傳自定義參數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vuex實(shí)現(xiàn)的簡單購物車功能,結(jié)合實(shí)例形式分析了vuex購物車組件相關(guān)商品列表、購物車創(chuàng)建、添加、刪除、清空等相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
Vue后臺中優(yōu)雅書寫狀態(tài)標(biāo)簽的方法實(shí)例
在Vue中,我們可以非常便捷地通過標(biāo)簽實(shí)現(xiàn)狀態(tài)的保存,這篇文章主要給大家介紹了關(guān)于Vue后臺中如何優(yōu)雅的書寫狀態(tài)標(biāo)簽的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-08-08
vue項(xiàng)目中有一些方法需要在多個頁面調(diào)用,但為了避免在每個頁面都import進(jìn)來,可以把方法加到原型上去,這樣在每個組件中都能使用了,下面這篇文章主要給大家介紹了關(guān)于配置vue全局方法的兩種方式,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了vant-image本地圖片無法顯示的解決方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue實(shí)現(xiàn)手機(jī)掃描二維碼預(yù)覽頁面效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)手機(jī)掃描二維碼預(yù)覽頁面效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
今天小編就為大家分享一篇vue利用v-for嵌套輸出多層對象,分別輸出到個表的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue3使用axios并封裝axios請求的詳細(xì)步驟
本篇文章分步驟給大家介紹了vue3使用axios并封裝axios請求的詳細(xì)步驟，結(jié)合實(shí)例代碼給大家講解的非常詳細(xì)，需要的朋友參考下吧2023-06-06