对接高德地图的总结

对接高德地图API的总结

近期项目中需要对接高德地图做图形（画一个区域范围），所以把用的对接知识总结一下，先看个简单的效果图：

当然多看点别人的也不错，别人家的demo, 酸奶小妹

用 [TOC]来生成目录：

---

引用JS（高德地图WEB端JSApi）

引入高德地图的js高德地图JS接口
只要不是太复杂的功能可以不需要key值的，高德的功能大多不需要付费，但是没有key可能在某些方面有权限限制（由于我有key所以没感受到权限，呵呵）。

http://webapi.amap.com/maps?v=1.4.0&key=key值&plugin=AMap.MouseTool,AMap.PolyEditor,AMap.ToolBar

为了方便加载和页面的加载优化，推荐将插件引用的方式如上，&plugin=插件1，插件2，插件3；高德允许你用一个借口引用多个插件，当然不用就不引入。
解释几个简单个概念：
点标记： 地图上的一个点（包含坐标，title，事件甚至还有其他你想不到的东西）
覆盖物： 你在地图上看到的所有东西都是覆盖物（除了地图加载出来的默认的东西，地图上的点也是覆盖物）

开始渲染地图

首先要在页面上生成一个地图。

 var  map = new AMap.Map('containers', {
      resizeEnable: true, // 可以去掉
      zoom: 14, // 地图的层级，值的大小决定地图加载出来的比例尺的大小
      center: [116.39, 39.9], // 默认地图加载的总心点坐标，这是北京
      cursor: 'hand' // 鼠标在地图上的表现形式
  });
 // 还有我们可能要默认一下地图加载出来时是全国范围的
 AMap.plugin('AMap.Geocoder', function () {
      var geocoder = new AMap.Geocoder({
         city: "全国"// 城市，默认：“全国”
         });
  });

containers是地图所在的div的id，如上会默认生成一个地图区域。

map是这个地图的实例化对象，往后对地图的所有操作、事件监听等都要通过这个地图对象（map）来实现。
AMap是高德的地图类，后面还会用到它，所以记住它。
也许你在加载地图完成后想通过JS更改地图的比例尺
setZoomAndCenter（）是一个不错的选择。

map.setZoomAndCenter（15,center）; // 地图的层级，中心店坐标

获取地图中被点击的地方的经纬度和地址

map.on('click',function(e){
console.log(e.lnglat.getLng(),e.lnglat.getLat());// 我提醒过记住lng和lat参数的
  geocoder.getAddress(e.lnglat, function () {
        console.log(result.regeocode.formattedAddress); // 地址
    });
});

几个常见的工具

以上是高德地图的基础功能，后续的其他功能需要借助高德提供的工具/插件去实现（还记得引入的js里plugin后面的值吗？）。

可以回头看看我们是否引入了ToolBar这个插件。

    //显示控件
 map.plugin(["AMap.ToolBar"], function () {
          map.addControl(new AMap.ToolBar());
 });

Marker

点标记

// 默认一个点标记在地图中心点
maker = new AMap.Marker({
    map: map, // 提醒过这个地图对象的
    position:[116.39，39.9] // lng , lat 记住这2个经纬度的简写 
});

更多参数

属性/函数	值/参数	个人理解
setMap()	null/map	主要用来清空点标记，或者把点标记加载到地图中，注意map对象
extData	唯一值	如果你想定义多个点标记用这个参数作为唯一标识是不错的选择
setExtData()		与上面的这个属性功能一样，只是函数为了后续改变用的
setTitle(title:String)	title	点标记的标题，当然你可以getTitle()
getPosition()/setPosition([lng,lat])	经纬度	相信你会用到的，希望还记得lng，lat这个2个参数的含义
setClickable(clickable:Boolean )/getClickable( )	function(){}	设置点标记是支持鼠标单击事件,最好写回调函数

// 我想留个demo会更好
marker.setTitle('这是一个点标记');
marker.getPosition(); // 返回 116.39（lng），39.9（lat）,数组形式的，注意我再次强调了lng和lat

删除点标记还有一种方式：

map.remove(marker);

鼠标工具

MouseTool，强大到无法想象。
要画图的话，它是基础呢。

mouseTool = new AMap.MouseTool(map)
drawPolygon = MouseTool.polygon(); // 鼠标画图的对象，不会使用这个对象，但是要实例化MouseTool.polygon（）

方法	解释
marker( options：MarkerOptions)	画点标记，鼠标点击地图会画出点标记
polygon( options：PolygonOptions)	鼠标点击会画出多边形，右击或者双击结束（画图必备）
polyline( options：PolylineOptions)	画直线或者折线
circle( options：CircleOptions)	画圆,很不方便
close( Boolean true/fasle)	这是最重要的方法，true清除覆盖物，false则不是
draw	这是个事件，与click、mouseDown类似

// 来个demo, 鼠标在地图上画了之后获取画的图形的坐标，在这之前需要实例化mouseTool.polygon()方法
 AMap.event.addListener(mouseTool, 'draw', function(e) { 
   arr = e.obj.getPath();//获取路径坐标
});
// 画图结束,关闭
mouseTool.close();

虽然MouseTool很强大，但是仅靠它也不能做太多事，需要其他的工具来配合，所以说到底这只是一个强大的辅助（34D的奶妈），但是皮脆啊。

折线、多边形编辑

AMap.PolyEditor 插件

AMap.PolyEditor( Map, Object);// 构造函数
// 也许我的代码更具有说服力
editors = {};
editors._polygon=(function(){
    return new AMap.Polygon({
           map: map,
           path: [[lng,lat],[lng,lat],[lng,lat],[lng,lat]],// arr 数组，  arr = e.obj.getPath();
           strokeColor: "#0000ff",
           strokeOpacity: 1,
           strokeWeight: 3,
           fillColor: "#f5deb3",
           fillOpacity: 0.35
       });
})();
editors._polygonEditor= new AMap.PolyEditor(map, editors._polygon);
// 生成的覆盖物（图形）
     editors._polygonEditor.open(); // 可被编辑状态
     editors._polygonEditor.close();// 关闭编辑状态，然后取经纬度
      arr =  editors._polygon.getPath();

也许还有人需要做轨迹回放或者折线.

事件	参数	说明
addnode	MapsEvent	通过鼠标在折线上增加一个节点或在多边形上增加一个顶点时触发此事件
adjust	MapsEvent	鼠标调整折线上某个节点或多边形上某个顶点的位置时触发此事件
removenode	MapsEvent	通过鼠标在折线上删除一个节点或在多边形上删除一个顶点时触发此事件
end	type,target}	在调用close方法时，触发该事件，target即为编辑后的折线/多边形对象

实践是最好的老师

点聚合:AMap.MarkerClusterer

个人认为这个意义不大。

事件监听

地图上覆盖物的监听

// 事件监听
AMap.event.addDomListener(document.getElementById(''), 'click', function () {
// 操作
});
 // js触发
 document.getElementById('').click();

地图监听：

map.on('click',function(){
// 左击操作
});

map.on('rightclick',function(){
// 右击操作
});

map.on('dblclick',function(){
// 双击操作
});

文档监听

   document.body.onmouseup = function(e){ 
   // 操作
  if( e.button==2){
  // 左击 操作
  }else if(e.button==3){
  // 没记错的话是右击
  }
   };

对象的事件监听

AMap.event.addListener(对象，‘事件’,function(){
// 回头看看我们用过的，画图时
});

移除监听事件

removeListener（）；// addDomlistener/addlistener 都能移除，用的不多

有用的参数

extData 多个相同覆盖物的唯一标识的不错选择
marker.setMap(null);与map.clearMap()
hasOwnProperty()，对象的这个方法去判断属性是不错的

更多

如果要控制覆盖物的个数，推荐使用计数器，并把对象放入数组中，然后使用extData区标识，而对于不必要的操作加把锁就能搞定了。

var lock =true ;
map.on('click',function(){
if(lock == true){
// 操作1
}else if(lock == false){
// 操作2
lock = true;
}
});
map.on('dbclick',function(){
lock = false;
});