高德地图的简单使用

1、效果图

右边的内容为手动添加部分，不要把高德混在一起

2、实现步骤

1. 注册高德账号，进入控制台查看key
   
2. 在网页中引入js文件（注意src中有key和plugin插件）

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=申请的key值&plugin=AMap.Scale,AMap.OverView,AMap.ToolBar"></script> 

3. 在网页中写入标签元素 列如：

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

4. 使用高德api（这一步完成就实现了简单的地图显示）

// 初始化地图(如果只是简单使用可以不用声明marker,声明marker的作用是添加标注点)
 var marker, map = new AMap.Map('container', {
   resizeEnable: true, //是否监控地图容器尺寸变化
   zoom:11, //初始化地图层级
   center: [121.59996, 31.197646], //初始化地图中心点
 });

5. 配置工具栏（这里就用到了上面的插件，其实第四步就已经用到了）

// 添加比例尺（下面图片划圈部分）
 var scale = new AMap.Scale({
   visible: true
 })
 map.addControl(scale);

// 工具条
var toolBar = new AMap.ToolBar({
  visible: true
})
map.addControl(toolBar);

6. 开始处理点标注

let arr = [], markers = [] // arr是你从后端请求的的数据, markers是你处理过后的数据
for (let i = 0; i < arr.length; i++) {
   var lng = parseFloat(arr[i].bProjectLongitude);
   var lat = parseFloat(arr[i].bProjectLatitude);
   if (lat > 0 && lat < 180 && lng > 0 && lng < 180) { // 合适的坐标
     this.markers.push({
       icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png", // 点标注图标
       position: [lng, lat], // 定位
       offset: new AMap.Pixel(-13, -30), // 偏移
       clickable: true, // 是否开启点击
       extData: arr[i] // 绑定数据
     });
   }
}
let markerArr = [] // 用来存放所有的标注点
// 循环标注点，添加到地图中
for(let i = 0; i <= this.markers.length; i++){
  marker = new AMap.Marker(this.markers[i])
  marker.setMap(map);
  // 为每个点添加点击事件
  var clickHandle = AMap.event.addListener(marker, 'click', function(e) {
    let cur =JSON.parse(JSON.stringify(e.target.getExtData()));
    // cur是上面每个点绑定的数据
    console.log(cur)
   	// 下面拿到数据，可以点击点进行对应的操作
  })
  markerArr.push(marker)
}
// 添加聚合点
map.plugin(["AMap.MarkerClusterer"], function () {
  cluster = new AMap.MarkerClusterer(map, markerArr);
});

3、高德根据输入的地理位置查询附近建筑的api（额外记录）

效果图

`https://restapi.amap.com/v3/place/text?key=${key值}=${关键字 例如黄埔区人民}&types=&city=${城市 如：上海}&children=1&offset=50&page=1&extensions=base`