背景描述：
使用 uni-app 开发的 pc 端网页，需要内嵌一个地图。
样式如下：
步骤1：
打开高德地图开发者平台(高德开放平台 | 高德地图API (amap.com))
步骤2：
在要使用的页面中引入
import AMapLoader from "@amap/amap-jsapi-loader";
// 设置安全密钥
window._AMapSecurityConfig = {
securityJsCode: 'XXXXXXXXXXXXXXXXXXXXXXXXXXX', // 申请的密钥
}
步骤3：
因为我需要请求坐标显示在地图中，所以在 onLoad 中，请求接口后初始化的地图。
初始化方法如下
data() {
return {
map: null,
}
}
----------------- 分割线 ------------------
// 地图初始化 方法
initMap() {
AMapLoader.load({
"key": "XXXXXXXXXXXXXXXXXXXXXXXXXXX",// TODO 申请的 key
"version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
}).then((AMap) => {
// 初始化地图
this.map = new AMap.Map('bai-du-map', {
viewMode: "2D", // 是否为3D地图模式
zoom: 15, // 初始化地图级别
center: [119.000000, 36.000000],
resizeEnable: true
});
// 自定义标记点的内容
var content = `
<div style="width: 340px;height:100px;display: flex;flex-wrap: wrap;justify-content: center;">
<div style="background: #fff;width:340px;font-size: 14px;padding:15px 20px;border: 1px solid #A8ABB2;box-shadow: 1px 1px 5px 2px rgba(0,0,0,0.08);">
<p>客服电话：${this.footInfo.telephone}</p>
<p style="margin-top: 5px;">公司地址：${this.footInfo.address}</p>
</div>
<img src="/static/icon.png" style="width:30px;height:30px;margin-top:10px;"/>
</div>
`;
var marker = new AMap.Marker({
content: content, // 自定义点标记覆盖物内容
anchor:'bottom-center', // 设置锚点方位
position: [119.000000, 36.000000], //标注点位置
title: `鼠标移入显示的提示`, //标注点标题
map: this.map //将标注点添加到地图上
});
}).catch(e => {
console.log(e);
});
},
注意：
1、修改一下key 改成平台中申请的那个
2、坐标我传的是 number 类型
3、自定义锚点内容的化，注意 设置锚点方位，我的标注点是最底下居中，所以设置了 anchor:'bottom-center'
