准备阶段
-
注册账号并申请Key
-
在页面添加 JS API 的入口脚本标签，并将其中「你申请的key值」替换为你刚刚申请的 key；
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key值"></script>
- 添加div标签作为地图容器，同时为该div指定id属性；
<div id="container"></div>
- 执行构造函数，参数为准备阶段添加的地图容器id，返回一个实例对象；同时可以给地图设置中心点、级别、显示模式、自定义样式等属性：
var map = new AMap.Map('container', {
zoom:11,//级别
center: [116.397428, 39.90923],//中心点坐标
viewMode:'3D'//使用3D视图
});
获取地图中心点坐标
拖动地图时获取中心点坐标
//初始化地图
var map = new AMap.Map('container', {
resizeEnable: true, //是否监控地图容器尺寸变化
zoom: 11, //初始地图级别
center: [121.498586, 31.239637], //初始地图中心点
});
//显示地图层级与中心点信息
function logMapinfo(){
var center = map.getCenter(); //获取当前地图中心位置
var { lat, lng } = center;
console.log(center);
};
//绑定地图移动事件
map.on('moveend', logMapinfo);
效果图：
通过
map.on('moveend', fn)绑定地图拖动事件，再通过调取map.getCenter()很轻松就拿到了中心点经纬度数据。
逆地理编码
上面我们已经拿到了经纬度信息，接下来就是解析成的地址信息了——地理编码服务。
- 正向地理编码： 将地址描述信息转换成地理坐标（经纬度），对应为AMap.Geocoder的getLocation方法
- 逆向地理编码：将地理坐标（经纬度）转换成地址描述信息，对应为AMap.Geocoder的getAddress方法
// 引入Geocoder插件
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key值&plugin=AMap.Geocoder"></script>
...
var geocoder = new AMap.Geocoder({
city: '全国'
});
...
geocoder.getAddress(`${lng},${lat}`, (status, result)=> {
if (status === 'complete' && result.info === 'OK') {
let address = result.regeocode.formattedAddress;
let cityName = result.regeocode.addressComponent.province;
console.log(address,cityName)
}
})
效果图：
官方文档:地理编码与逆地理编码
自定义poi搜索与地图联动
篇幅有限，流程大致如下：
输入关键字 > 调用搜索接口 > 接口返回批量地址信息供用户选择 > 根据用户选中地点的经纬度 > 设置地图中心点
用户拖动地图选择 > 获取地图中心点经纬度 > 逆地理编码 > 地址文字信息。
使用过程中发现的问题
设置地图中心点，缩放(鼠标滑轮)也会触发map.on('moveend', fn)绑定地图拖动事件。
设置地图中心点
...
map.setCenter([109.598586, 31.339637]);
console.log('移动至121.598586, 31.339637');
效果图：
这样就会导致我们通过poi搜索地址设置地图中心点时，触发moveend事件、获取中心点经纬度、解析地址等一些操作，需要额外处理。
缩放鼠标滑轮
效果图：
小结
这里只是简单的熟悉了一下高德所提供的一些简单API接口，更为复杂的场景请移步：官网
