- 引入高德地图js api 高德地图api官方文档
根据官方文档建议,我使用的是JSAPI Loader 并且是通过npm安装的
npm i @amap/amap-jsapi-loader --save
- 在脚本中导入
import AMapLoader from '@amap/amap-jsapi-loader';
- 给地图准备一个容器并加入css样式
<view id="container"></view>
<style>
#container {
padding: 0px;
margin: 10px;
width: 100%;
height: 280px;
}
</style>
- 初始化地图
initMap() {
AMapLoader.load({
key: "申请好的Web端开发者Key", // 申请好的Web端开发者Key,首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: ['AMap.Geocoder', 'AMap.Geolocation']