1987WEB视界-分享互联网热门产品和行业

您现在的位置是:首页 > WEB开发 > 正文

WEB开发

高德地图的2种引入方式

1987web2024-03-25WEB开发182
方法一:使用amap-jsapi-loader

方法一:使用amap-jsapi-loader插件

步骤1.npm安装插件 npm install @amap/amap-jsapi-loader --save

步骤2. 创建地图组件

vMap/index页面代码如下:

class="mapContainer":id="uuid"> lang="less"scoped>.mapContainer{width:100%;height:100%;//隐藏左下角高德地图logo.amap-logo,.amap-copyright{display:none!important;}}

注意点:地图组件要有高度,否则无法显示

步骤3.父组件页面使用vMap自定义地图组件

方法二:使用script直接引入

步骤1. 在Publicinde.html文件的script中直接引入

步骤2.config中配置
configureWebpack:{externals:{AMap:"AMap"},},

步骤3. 创建自定义地图组件
template><divclass="mapContainer":id="uuid">