【Vue】请问如何在vuejs+webpack构建的项目中引入并使用高德地图API？

Z时代
2024-01-10
分类：技术分享

如题，请问如何在vuejs+webpack构建的项目中引入并使用高德地图API？
使用的官方的vue-cli

按照 aryu 提示的方法，现在的问题是import进来的AMap是undefined的，但在浏览器中API应该是加载进来了，但不知道为什么是undefined

externals: {
'AMap': 'window.AMap'
}

将webpac.base.conf.js中的window去掉就正常了：

externals: {
'AMap': 'AMap'
}

非常感谢 aryu 的帮助！

回答

先在index.html里添加高德的js sdk。
之后在build文件夹的webpack配置文件中，添加external，可以命名为'AMap',对象是'window.AMap'。之后在需要用到的组件里import AMap就可以正常使用了。

到公司用电脑了再补上一段配置代码吧：
在webpack.base.conf.js中，exports对象：

externals: {
    'AMap': 'window.AMap'}

例如我我在APP.vue中需要使用高德的JS SDK，就在APP.vue中：

import AMap from 'AMap'

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>test</title>
  </head>
  <body>
    <map></map>
    <script src="http://webapi.amap.com/maps?v=1.3&key=yourkey"></script>
    <!-- built files will be auto injected -->
  </body></html>

main.js:

import Vue from 'vue'
import Map from './components/Map'
/* eslint-disable no-new */
new Vue({
  el: 'body',
  components: { Map }})

Map.vue:

<template>
    <div id="map-container"></div>
</template>
<style>
#map-container {
    height: 600px;
    width:500px;
}
</style>
<script>
import AMap from 'AMap'
console.log(AMap)
export default {
  ready () {
    const map = new AMap.Map('map-container', {
      zoom: 15,
      center: [116.39, 39.9]
    })
    console.log(map)
  }
}</script>