地图上分成一块一块区域 高德地图_使用高德地图绘制多边形区域（转）

转自：http://www.cnblogs.com/mengxingxinqing/p/6087201.html

最近遇到一个需求，在网页上面编辑多边形的区域，并且需要能够判断一个点是否在这个多边形区域里面。

看了一下高德地图的jsapi，简单的做了一个demo。

1.你需要一个高德地图的账号，注册地址

2.登陆进去创建一个应用，这个时候就会给你一个对应的Key

3.查看高德地图的的demo，进入

4.学习一下左侧分类里面的

5.看完上面的，接下来我们接着学习

6.下面我们就要开始将上面的功能组合起来，进行高德地图多边形的编辑了

6.1 首先，我先用点标记在地图上选中3个点，组成一个最基本的多边形(三角形)

//用来存储3个基本点的数组 第一个存点坐标 第二个存Marker(点标记)对象

var beginPoints;

var beginMarks ;

//地图上面的click事件对象

var clickListener ;

//当前绘制的点个数，用来控制前面3个点

var beginNum;

//初始化

function init(){

beginPoints = [];

beginMarks = [];

beginNum = 0;

clickListener = AMap.event.addListener(map, "click", mapOnClick);

}

init();

//地图上面绑定的点击事件

function mapOnClick(e) {

// document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()

beginMarks.push(addMarker(e.lnglat));

beginPoints.push(e.lnglat);

beginNum++;

if(beginNum == 3){

//处理有了3个点以后，转化为多边形的逻辑

}

};

// 实例化点标记

function addMarker(lnglat) {

var marker = new AMap.Marker({

icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",

position: lnglat

});

marker.setMap(map);

return marker;

}

在上面的代码里需要说一点的是，高德地图的事件绑定跟java的事件绑定有些类似 clickListener = AMap.event.addListener(map, "click", mapOnClick);

其中第一个参数是要绑定事件的对象，第二个参数是事件类型，第三个参数是对应是事件函数。取消绑定事件的方法AMap.event.removeListener(clickListener);

6.2 绘制好3个点之后，构建多边形对象，绑定对应的多边形编辑对象

//在上面的留空处，处理有了3个点以后的逻辑，继续开始

AMap.event.removeListener(clickListener);

var polygon = createPolygon(beginPoints);

polygonEditor = createEditor(polygon);

clearMarks();

//处理结束

//上面用到的几个函数

//创建一个多边形对象

function createPolygon(arr){

var polygon = new AMap.Polygon({

map: map,

path: arr,

strokeColor: "#0000ff",

strokeOpacity: 1,

strokeWeight: 3,

fillColor: "#f5deb3",

fillOpacity: 0.35

});

return polygon;

}

//创建一个多边形对象的编辑类对象

function createEditor(polygon){

var polygonEditor = new AMap.PolyEditor(map, polygon);

polygonEditor.open();

AMap.event.addListener(polygonEditor,'end',polygonEnd);

return polygonEditor;

}

//编辑结束事件

function polygonEnd(res){

resPolygon.push(res.target);

alert(resPolygon[resNum].contains([116.386328, 39.913818]));

appendHideHtml(resNum,res.target.getPath());

resNum++;

init();

}

//将多边形路径保存到html隐藏域里

function appendHideHtml(index,arr){

var strify = JSON.stringify(arr);

var html = '';

$('body').append(html);

console.log(html);

}

//清除前面的3个点标记

function clearMarks(){

map.remove(beginMarks);

}

上面的代码里需要主要的主要是 1.高德地图清除点标记，支持清除一组，按照数组清除。2.PolyEditor这个多边形编辑对象，主要使用到了open()和close()两个函数，以及end事件(当调用了close函数后触发)3.我按照多边形的次序，将他们append到html的隐藏域中，并且将id使用了index+次序的方式生成。

然后可以选择将隐藏域中的内容提交到服务器，或者做其他的处理。

完整demo如下：

编辑折线、多边形、圆