高德地图地图 JS API 2.0 基本使用

1. 按 NPM 方式安装使用 Loader

npm i @amap/amap-jsapi-loader --save

2. 新建 MapContainer.vue 文件

在项目中新建 MapContainer.vue 文件，用作地图组件。

3.创建地图容器

在 MapContainer.vue 地图组件中创建 div 标签作为地图容器，并设置地图容器的 id 属性为 container。

<template><div id="container"></div>
</template>

4.设置地图容器样式

<style  scoped>#container{padding:0px;margin: 0px;width: 100%;height: 800px;}
</style>

5.引入 JS API Loader

在地图组件 MapContainer.vue 中引入 amap-jsapi-loader

import AMapLoader from '@amap/amap-jsapi-loader';

6.创建地图组件

在 MapContainer.vue文件中初始化地图

vue 2 中的组件形式

<template><div id="container" />
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'export default {name: 'MapView',props: {point: {type: Array,default: () => [116.397428, 39.90923]}},mounted() {this.initAMap()},unmounted() {this.map?.destroy()},methods: {initAMap() {AMapLoader.load({key: '867e334269c0b9efbb3b9bff05f1d020', // 申请好的Web端开发者Key，首次调用 load 时必填version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: [] // 需要使用的的插件列表，如比例尺'AMap.Scale'等}).then((AMap) => {this.map = new AMap.Map('container', {// 设置地图容器idviewMode: '3D', // 是否为3D地图模式zoom: 13, // 初始化地图级别center: this.point // 初始化地图中心点位置})var circle = new AMap.Circle({center: this.point, // 圆心经纬度radius: 3000, // 半径，单位：米borderWeight: 2, // 边框线宽strokeColor: '#636BF7', // 边框颜色strokeOpacity: 1, // 边框透明度strokeWeight: 2, // 边框线宽（与borderWeight重复，可只设置一个）fillColor: '#9AD4F3', // 填充颜色fillOpacity: 0.3, // 填充透明度zIndex: 50 // 堆叠层级})// 将圆形添加到地图上circle.setMap(this.map)// 文本标记点var text = new AMap.Text({text: 'xxx米内打卡', // 标记显示的文本内容anchor: 'center', // 设置文本标记锚点位置draggable: true, // 是否可拖拽cursor: 'pointer', // 指定鼠标悬停时的鼠标样式。angle: 0, // 点标记的旋转角度style: {// 设置文本样式，Object 同 css 样式表padding: '.3rem .5rem','margin-bottom': '0','border-radius': '.25rem','background-color': 'white',width: '8rem','border-width': 0,'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)','text-align': 'center','font-size': '20px',color: 'red'},position: this.point // 点标记在地图上显示的位置})text.setMap(this.map) // 将文本标记设置到地图上}).catch((e) => {console.log(e)})}}
}
</script>
<style scoped>
#container {width: 80%;height: 710px;
}
</style>