同理Vue引入高德地图的实现代码

　　

本文代码仅针对Vue CLI 3。x生成的项目有效,但是在第二步配置的时候,可以直接配置webpack.externals,所以本引入思路是通用的,并不局限于该项目

　　


　　

　　

同理准备-入门教程

　　


　　

　　

在公共/索引。html文件& lt;/body>前引入

　　 　　 　　& lt;脚本type=" text/javascript " src=" https://webapi.amap.com/maps& # 63; v=1.4.14&关键=您申请的关键值”祝辞& lt;/script> 　　 　　


　　

　　

项目根目录新建配置文件vue.config.js,填入内容:

　　 　　 　　模块。出口={ 　　configureWebpack: { 　　外部:{ 　　同理:“window.AMap” 　　} 　　} 　　}; 　　之前 　　 　　


　　

　　

新建索引。vue文件,填入内容:

　　 　　 　　& lt; template> 　　& lt; div> 　　& lt; div id="容器"祝辞& lt;/div> 　　& lt;/div> 　　& lt;/template> 　　& lt; script>//eslint-disable-next-line 　　从“同理”进口同理; 　　出口默认{ 　　名称:“指数”, 　　数据(){ 　　返回{}; 　　}, 　　安装(){ 　　新的同理。地图(“容器”,{ 　　resizeEnable:没错, 　　变焦:11 　　}); 　　} 　　}; 　　& lt;/script> 　　 　　之前 　　 　　

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

同理Vue引入高德地图的实现代码