JS调用高德地图标注地点-简单呐

无需复杂框架，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类添加标记

好啦！今天的分享到此结束！就上面的问题如果谁有更好的办法，劳烦指教！