Vue 引入AMap高德地圖的實(shí)現(xiàn)代碼

更新時(shí)間：2019年04月29日 11:20:21 作者：Where

這篇文章主要介紹了Vue 引入AMap高德地圖的實(shí)現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

本文代碼僅針對 Vue CLI 3.x 生成的項(xiàng)目有效，但是在第二步配置的時(shí)候，可以直接配置 webpack.externals，所以本引入思路是通用的，并不局限于該項(xiàng)目

資源

AMap 準(zhǔn)備-入門教程

引入 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文件
這篇文章主要介紹了Vue如何使用本地JSON文件問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
Vue中使用highlight.js實(shí)現(xiàn)代碼高亮顯示以及點(diǎn)擊復(fù)制
本文主要介紹了Vue中使用highlight.js實(shí)現(xiàn)代碼高亮顯示以及點(diǎn)擊復(fù)制，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-01-01
vue中的el-tree @node-click傳自定義參數(shù)
這篇文章主要介紹了vue中的el-tree @node-click傳自定義參數(shù)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
vuex實(shí)現(xiàn)的簡單購物車功能示例
這篇文章主要介紹了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全局方法的兩種方式實(shí)例
vue項(xiàng)目中有一些方法需要在多個(gè)頁面調(diào)用,但為了避免在每個(gè)頁面都import進(jìn)來,可以把方法加到原型上去,這樣在每個(gè)組件中都能使用了,下面這篇文章主要給大家介紹了關(guān)于配置vue全局方法的兩種方式,需要的朋友可以參考下
2021-09-09
vant-image本地圖片無法顯示的解決方式
這篇文章主要介紹了vant-image本地圖片無法顯示的解決方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
Vue實(shí)現(xiàn)手機(jī)掃描二維碼預(yù)覽頁面效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)手機(jī)掃描二維碼預(yù)覽頁面效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-03-03
vue利用v-for嵌套輸出多層對象,分別輸出到個(gè)表的方法
今天小編就為大家分享一篇vue利用v-for嵌套輸出多層對象,分別輸出到個(gè)表的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue3使用axios并封裝axios請求的詳細(xì)步驟
本篇文章分步驟給大家介紹了vue3使用axios并封裝axios請求的詳細(xì)步驟，結(jié)合實(shí)例代碼給大家講解的非常詳細(xì)，需要的朋友參考下吧
2023-06-06