快捷導(dǎo)航

在vue項(xiàng)目中引入高德地圖及其UI組件的方法

更新時(shí)間：2018年09月04日 09:51:24 作者：shuaizi96

今天小編就為大家分享一篇在vue項(xiàng)目中引入高德地圖及其UI組件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

引入高德地圖：

打開index.html，引用高德地圖的JavaScript API：

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你的API key"></script>

在“key=”這里添加你申請(qǐng)的key，key不需要加引號(hào)。

引入高德地圖UI組件，只需要在上面代碼后面再加一串代碼：

<script src="http://webapi.amap.com/ui/1.0/main.js"></script>

配置webpack

打開webpack.base.conf.js文件，找到module.exports，在externals對(duì)象中加入一行：'AMap': ‘AMap'

externals: {
 'AMap': 'AMap',
},

至此引入的步驟已完成，創(chuàng)建一個(gè)vue文件

<template>
 <div id="container" class="mymap"></div>
</template>
<script>

import AMap from 'AMap'; //在頁(yè)面中引入高德地圖

export default {
 mounted(){
  this.loadmap();  //加載地圖和相關(guān)組件
 },
 methods: {
  loadmap(){
  const map = new AMap.Map('container', {
   zoom: 9
  });
  }
 }
}
</script>
<style scoped>
 .mymap{
  width: 300px;
  height: 300px;
 }
</style>

運(yùn)行，不出意外就可以看到地圖了：

如果使用高德地圖UI組件，在加載地圖的同時(shí)加載UI組件就可以了：

loadmap(){
 const map = new AMap.Map('container', {
  zoom: 9
 });
 AMapUI.loadUI(...)  //加載UI組件
}

組件里的內(nèi)容根據(jù)需求自定，各組件在高德地圖官網(wǎng)有demo，可以直接粘進(jìn)來(lái)用。

以上這篇在vue項(xiàng)目中引入高德地圖及其UI組件的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

搭建Vue3+Vite+Ts腳手架的示例代碼
本文介紹了Vue3+Vite+Ts搭建腳手架的實(shí)現(xiàn),步驟包括創(chuàng)建項(xiàng)目、選擇技術(shù)棧、安裝依賴及運(yùn)行項(xiàng)目,旨在為開發(fā)者提供一個(gè)簡(jiǎn)易快速的搭建流程,感興趣的可以了解一下
2024-11-11
vue使用echarts實(shí)現(xiàn)柱狀圖動(dòng)態(tài)排序效果
echarts在前端開發(fā)中實(shí)屬必不可缺的大數(shù)據(jù)可視化工具,這篇文章主要為大家詳細(xì)介紹了vue如何使用echarts實(shí)現(xiàn)柱狀圖動(dòng)態(tài)排序效果,感興趣的可以了解下
2023-10-10
vue高德地圖JS API實(shí)現(xiàn)海量點(diǎn)標(biāo)記示例
本文主要介紹了vue高德地圖JS API實(shí)現(xiàn)海量點(diǎn)標(biāo)記示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
如何解決d3.event在v7版本無(wú)效影響zoom拖拽縮放問題
這篇文章主要介紹了如何解決d3.event在v7版本無(wú)效影響zoom拖拽縮放問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
elementui的el-popover修改樣式不生效的解決
在使用element-ui的時(shí)候，有一個(gè)常用的組件，那就是el-popover，本文就介紹一下elementui的el-popover修改樣式不生效的解決方法，感興趣的可以了解一下
2021-06-06
Vue3系列教程之插槽slot詳解
插槽（slot）可以說(shuō)在一個(gè)?Vue?項(xiàng)目里面處處都有它的身影，比如我們使用一些UI?組件庫(kù)的時(shí)候，我們通常可以使用插槽來(lái)自定義我們的內(nèi)容，今天通過(guò)本文給大家介紹vue3插槽slot的相關(guān)知識(shí)，感興趣的朋友一起看看吧
2022-08-08
Vue3 頁(yè)面,菜單,路由的使用
這篇文章主要介紹了Vue3之頁(yè)面,菜單,路由的使用，文章圍繞Vue3頁(yè)面,菜單,路由相關(guān)資料展開詳細(xì)內(nèi)容,需要的朋友可以參考一下
2021-11-11
el-select下拉選擇緩存的實(shí)現(xiàn)
本文主要介紹了在使用el-select實(shí)現(xiàn)下拉選擇緩存時(shí)遇到的問題及解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2025-01-01
Vue3封裝組件完整實(shí)例(帶回調(diào)事件)
Vue.js已成為現(xiàn)代Web開發(fā)中不可或缺的技術(shù)之一,雖然Vue.js的一些基礎(chǔ)概念和語(yǔ)法比較易學(xué),但深入挖掘Vue.js的核心概念和功能需要更多的實(shí)踐,下面這篇文章主要給大家介紹了關(guān)于Vue3封裝組件(帶回調(diào)事件)的相關(guān)資料,需要的朋友可以參考下
2023-06-06
Vuejs 頁(yè)面的區(qū)域化與組件封裝的實(shí)現(xiàn)
本篇文章主要介紹了Vuejs 頁(yè)面的區(qū)域化與組件封裝的實(shí)現(xiàn)。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09