google map上实现通过点击地图任意点进行标记并形成多边形

首先我们实现的功能是点击地图标记通过动画的形式落到地图上，当点击多点的时候会形成一片不规则的多边形区域，并且判断某一点是否在这个区域。

实现这个功能我们需要对google map 上的marker和polygon进行了解。

官方参考：

https://developers.google.com/maps/documentation/javascript/3.exp/reference?hl=zh-cn#Map

首先载入一个google map并显示到一个div上，可以参考：

http://www.easymorse.com/index.php/archives/602

地图可以显示到页面上以后我们需要控制的对点击地图的处理：





当点击的时候我们将被点击的点的坐标（经纬度）存放到一个数组中，我们还应该将被点击的点加上marker标记，并且要以动画的形式落到地图上：





接下来我们就要将被点击过的点连起来形成一片多边形区域，需要介绍的是google map上的多边形是根据点的顺序自动连接而成的，代码如下：





这样我们就可以实现一下效果：









最后我们还可以判断某一点是否在这个红色的区域内，由于google map api上没有已经写好的判断的方法，所以我们需要自己写方法对其进行实现，大体的思路就是先得到多边形的Bounds的getBounds方法，通过此方法我们可以知道这个区域经度的最大值和最小值，纬度的最大值和最小值，然后我们再通过一个方法containsLatLng判断已知的点的经纬度是否在Bounds的经纬度的范围内：

google.maps.Polygon.prototype.getBounds = function() {
var bounds = new google.maps.LatLngBounds();
var paths = this.getPaths();
var path;

for (var p = 0; p < paths.getLength(); p++) {
path = paths.getAt(p);
for (var i = 0; i < path.getLength(); i++) {
bounds.extend(path.getAt(i));
}
}

return bounds;
}

google.maps.Polygon.prototype.containsLatLng = function(latLng) {

// Exclude points outside of bounds as there is no way they are in the poly

var lat, lng;

//arguments are a pair of lat, lng variables
if(arguments.length == 2) {
if(typeof arguments[0]=="number" && typeof arguments[1]=="number") {
lat = arguments[0];
lng = arguments[1];
}
} else if (arguments.length == 1) {
var bounds = this.getBounds();

if(bounds != null && !bounds.contains(latLng)) {
return false;
}
lat = latLng.lat();
lng = latLng.lng();
} else {
console.log("Wrong number of inputs in google.maps.Polygon.prototype.contains.LatLng");
}
var inPoly = false;

var numPaths = this.getPaths().getLength();
for(var p = 0; p < numPaths; p++) {
var path = this.getPaths().getAt(p);
var numPoints = path.getLength();
var j = numPoints-1;

for(var i=0; i < numPoints; i++) {
var vertex1 = path.getAt(i);
var vertex2 = path.getAt(j);

if (vertex1.lng() < lng && vertex2.lng() >= lng || vertex2.lng() < lng && vertex1.lng() >= lng) {
if (vertex1.lat() + (lng - vertex1.lng()) / (vertex2.lng() - vertex1.lng()) * (vertex2.lat() - vertex1.lat()) < lat) {
inPoly = !inPoly;
}
}

j = i;
}
}

return inPoly;
}

这样就实现了以上我们提到的所有内容。