在Vue-Cli 3.0中配置高德地图的两种方法

在vue中使用高德地图有两种方法

I. vue-amap组件

官方网站：https://elemefe.github.io/vue-amap/#/

刚开始的时候打算用这个组件做地图功能，但是尝试了之后出现了一些问题，就放弃了。也许我用错了。我遇到的问题：

1.安装后，始终提示跨域问题。

2.页面刷新后，地图无法出来。第一次进入页面就可以了。因为这两个问题，这个组件的使用被放弃了。我想我的代码可能有问题。

第二，直接引用高德地图SDK

因为第一次尝试失败，我选择了直接引用SDK的方式。使用这种方法，第一种方法没有问题。直接引用SDK的方式和步骤：

1.在公共文件夹下添加index.html

脚本类型=' text/JavaScript ' src=' http :http://web API . AMAP.com/maps？V=1.4.4key=您为“/script 2”申请的密钥。在vue.config.js文件中配置externals

module . exports={ devserver 3360 { port : 57103//端口号配置}，配置web pack k 3360 { external s : { ' AMAP ' 3360 ' AMAP '/高德地图配置}}注意：vue.config.js文件应该是自己创建的，vue-。此外，修改vue.config.js不会触发热加载，也就是说，您需要在修改后重新运行您的项目才能生效。

3.实际使用

模板div class=' box ' div id=' container ' style=' width :500 px；height :300 Px '/div/div/templates import AMAP来自' AMAP '/import高科技地图导出默认{mounted () {this.init ()}，methods : { init(){ let map=new Amap。Map('container '，{ center: [116.397428，39.90923]，resizeEnable: true，Zoom: 10 })} }}脚本注意：请在装入的生命周期中调用init()方法，因为如果在创建阶段调用它，将找不到html元素div#container。

4.翻译

摘要

以上是边肖介绍的Vue-Cli 3.0中配置高德地图的两种方式，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！