无需复杂框架，10分钟实现地图标注功能！
最近做官网的时候，需求要整一个地图，然后把公司的地址标注出来。我本来想着简单一点儿，直接高德地图搜索公司地址然后截张图贴上去就完事儿了，可是人家需求不干呀！非要让我调用高德地图的API，那咋弄，奈何身份地位，不弄不行呀，最终还是地下了牛马的头！
公司官网也比较简单，就直接用JS干了就行了，做的过程中还有一些小插曲，请继续往下看啦！
一、准备工作
-
注册高德开发者账号
前往高德开放平台注册（已有账号跳过）
-
创建新应用
- 进入控制台 → 应用管理 → 创建新应用
- 应用类型选择「Web端(JS API)」
-
获取Key密钥
在新建的应用中点击「添加Key」，输入应用名随便起一个（比如：container_map）
重要提示：提交后保存好生成的Key（到时候我们写js的时候是要使用的）
javascript
// 示例Key格式（请替换成你自己的）,这个其实感觉保存到后端应该更安全一些
const apiKey = 'XXXXXXXXXXXXXXXXXXXXXXX'; 二、2步实现地图标注
步骤1：其他的代码我就不写了，只写重要的部分代码
就一代码就行了，简单的很
html
<html>
<div id="container_map" style="width: 100%; height: 70%;"></div>
</html>
步骤2：初始化地图（核心代码）
javascript
var map = new AMap.Map('container_map', {
viewMode: '2D',
zoom: 15, // 初始化地图层级
center: [118.946237, 39.399277] // 初始化地图中心点
});
var marker = new AMap.Marker({
position: map.getCenter(),
icon: 'images/poi-marker-default.png',
anchor: 'bottom-center',
offset: new AMap.Pixel(0, 0)
});
marker.setMap(map);
marker.setLabel({
direction: 'right',
offset: new AMap.Pixel(0, 30), //设置文本标注偏移量
content: "<div class='info'>XXXXX技术有限公司</div>",
});
三、避坑指南（血泪经验）这里我要着重说一下
-
地图不显示？
- 检查
#container_map是否设置了宽高 - 确认API的key是否正确（90%的问题出在这里）
- 查看浏览器控制台是否有报错（F12打开）
- 检查
-
标记显示位置不对？
javascript// 正确坐标顺序：[经度, 纬度]别把这搞反了，搞反了有可能出不来的，鬼知道能定位到哪儿去 new AMap.Marker({ position: [116.123, 39.456] }) -
引入的JS位置加载的问题
- 因为不是说网页上光有地图这个一个元素，还有其他的内容，比如说导航栏的引入，底部栏等等，这可能导致刚开始引入JS的位置不对，然后就出现了什么情况呢？
如上图引入实在这里的，就导致页面上部分数据加载不出来了？调用接口赋的值出不来，请看图：
但是只要把地图的这个div屏蔽掉，又能出现了。
看了好久也不报错，不知道为啥，想着是不是
看效果(定位地址是随便写的，仅供参考)：
四、小结
- 注册高德开发者获取Key（免费）
- 引入JS API库（注意版本就用2.0版本的就完全符合要求了）
- 创建Map实例绑定容器，(id不敢写错了，低级错误)
- 用Marker类添加标记
好啦！今天的分享到此结束！就上面的问题如果谁有更好的办法，劳烦指教！