[原]高德地图ES6封装

发表于 |

在做公司签到项目过程中有一个需求就是在手机上根据地点限制进行打卡，在项目过程中使用到了以下功能,

1.初始化地图

2.更加经纬度定位中心点

3.根据经纬度自定义mark标记

4.根据经纬度自定义范围Cirle标记

5.根据关键字搜索并对搜索结果进行处理

封装代码全部采用es6的方式。在过程中对搜索结果采用了Promise，用以解决搜索结果延迟的的问题（JavaScript同步）
demo下载

代码如下

map.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130



/**
 * 高德地图封装
 *
 * @class Maps
 */
class Maps{
  constructor(option){
    this.option = option;
    this.gdmap = new AMap.Map(this.option.dom,this.option.setting);
  }
  /**
   * 重新设置地图中心点
   *
   * @param {any} poisition
   *
   * @memberOf Maps
   */
  changeMapCenter(poisition){
    this.gdmap.setZoomAndCenter(16,poisition)
  }

  /**
   * 在地图上添加mark（定位标记图标）
   *
   * @param {any} markOption
   *
   * @memberOf Maps
   */
  addMark(markOption){
    let self = this
    let icons = ''
    if(markOption.clearMark){
      self.gdmap.clearMap()
    }
    if(markOption.icon){
       icons= new AMap.Icon({
            size: new AMap.Size(40, 50),  //图标大小
            image: markOption.icon,
            imageOffset: new AMap.Pixel(0, -60)
        })
    }
    let mark = new AMap.Marker({
      position:markOption.position,
      icon:icons
    })
    if(markOption.title){
      self.addInfo(markOption);
    }
    mark.setMap(self.gdmap)
    mark.on("click",function () {
      self.addInfo(markOption);
    })
  }
  /**
   * 在地图上添加信息展示窗口
   *
   * @param {any} infoOption
   *
   * @memberOf Maps
   */
  addInfo(infoOption){
    let infoWindow;
     let infos = [];
        infos.push("<div>"+infoOption.title+"</div> ");
        infoWindow = new AMap.InfoWindow({
            content: infos.join("<br/>"),  //使用默认信息窗体框样式，显示信息内容
            offset: new AMap.Pixel(0, -30),
            autoMove:true
        });
        infoWindow.open(this.gdmap, infoOption.position);
  }
  /**
   *
   * 在地图上标记园
   * @param {any} circleInfo
   *
   * @memberOf Maps
   */
  addCircle(circleInfo){
    let center = new AMap.LngLat(circleInfo.center[0],circleInfo.center[1])
    let Circle = new AMap.Circle({
      center:center,
      radius:circleInfo.radius,
      fillOpacity:circleInfo.Opacity,
      fillColor:circleInfo.bgColor,
      strokeColor:circleInfo.borderColor
    })
    Circle.setMap(this.gdmap)
  }
  /**
   * 按关键字搜索并返回地址列表
   *
   * @param {any} searchInfo 搜索配置信息isGeographicis经纬度，addr地址
   * @returns {arry} info 返回地址数组列表
   *
   * @memberOf Maps
   */
  searchPlace(searchInfo){
    return new Promise(function (resolve, reject) {
      let info = [];
      AMap.service(["AMap.PlaceSearch"], function() {
        let placeSearch = new AMap.PlaceSearch({
          type:"汽车服务|汽车销售|汽车维修|摩托车服务|餐饮服务|购物服务|生活服务|体育休闲服务|医疗保健服务|住宿服务|风景名胜|商务住宅|政府机构及社会团体|科教文化服务|交通设施服务|金融保险服务|公司企业|道路附属设施|地名地址信息|公共设施",
          pageSize:searchInfo.size || searchInfo.size===0?searchInfo.size:10
        });
        //判断是否用经纬度搜索
        if(searchInfo.isGeographicis){
          placeSearch.searchNearBy('',searchInfo.Geographicis,searchInfo.range||1000);
        }else{
          placeSearch.search(searchInfo.addr)
        }
        //监听是否搜索完毕
        AMap.event.addListener(placeSearch, "complete", function (result) {
          result.poiList.pois.map(function (value) {
            info.push({
              lng:value.location.lng,
              lat:value.location.lat,
              name:value.name,
              addr:value.address
            });
          });
          resolve(info)
        });
      });
    });
  }
}

html 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-sacle=1,user-scalable=no" />
  <style>
    body{
      margin: 0;
      padding: 0
    }
    .map{
      width: 100%;
      height: 300px;
    }
  </style>
</head>
<body>
<div id="map" class="map"></div>
<hr>
<input type="text" name="" placeholder="请输入地址">
<div class="listAddr"></div>
<script src="http://webapi.amap.com/maps?v=1.3&key=304ddf7cb9b6415d4db8ab8cf3d97e10"></script>
<script src="./js/map.js"></script>
<script>
  const newMap = new Maps({
    dom:"map",
    setting:{
      center: [116.397428, 39.90923],//设置中心点
      zoom: 16,//设置地图缩放级别PC取值范围为3-18，移动端为3-19
      dragEnable:false,//设置地图是否可以鼠标拖拽
      zoomEnable:false//设置地图是否可缩放
    }
  })
  newMap.changeMapCenter([116.397428, 39.90923])
  newMap.addMark({
    position:[116.397428, 39.90923],//标记中心点
    icon:false,//false 使用默认的，需要自定义的传入图标路径
    title:"我是一个title"//给标记添加一个文章窗口描述
  })
  newMap.addCircle({
    center:[116.397428, 39.90923],//园的中心点
    radius:100,//半径
    Opacity:0.5,//透明度
    bgColor:"#ccc",//园的背景颜色
    borderColor:"#ccc"
  })
  let inputDom = document.getElementsByTagName("input")[0];
  let listAddrDom = document.getElementsByClassName("listAddr")[0];
  inputDom.addEventListener("change",function (e) {
    newMap.searchPlace({
      isGeographicis:false,//true时 Geographicis必须填写，false addr必须填写，如果为true按照默认按照经纬度搜索
      Geographicis:[116.397428, 39.90923],//根据经纬度查找
      range:1500,//默认为1000米，如果为0将使用默认值
      addr:this.value,//根据具体地点关键字查找
      size:10//搜索结果条数设置,如果不设置默认为10条
    }).then(function (date) {
      let html = '';
      if(date.length !== 0){
        newMap.changeMapCenter([date[0].lng, date[0].lat]);
        newMap.addMark({
          position:[date[0].lng, date[0].lat],//标记中心点
          icon:false,//false 使用默认的，需要自定义的传入图标路径
          title:date[0].name,//给标记添加一个文章窗口描述
          clearMark:false//是否清除之前的点,如果想添加多个点需要设置为false
        })
        newMap.addCircle({
          center:[date[0].lng, date[0].lat],//园的中心点
          radius:100,//半径
          Opacity:0.5,//透明度
          bgColor:"#ccc",//园的背景颜色
          borderColor:"#ccc"
        })
        date.map(function (resule) {
          html+='<ul>'+
                '<li>name:'+resule.name+'</li>'+
                '<li>addr:'+resule.addr+'</li>'+
                '<li>lng:'+resule.lng+'</li>'+
                '<li>lat:'+resule.lat+'</li>'+
                '</ul>'+
                '<hr>';
        })
      }else{
        html+="你搜索的地点高德地图无法认识请输入更多的关键字：例如地名+关键字";
      }
      listAddrDom.innerHTML= html
    })
  })
</script>
</body>
</html>

如果对您有所帮助或者对博主有更多的话说，欢迎你去我的GitHub留下一个您的start和issues

前往LEE的github给他一个Start鼓励一下吧

原创转载请标注出处：https://leehongqiang.github.io