首先我们实现的功能是点击地图标记通过动画的形式落到地图上,当点击多点的时候会形成一片不规则的多边形区域,并且判断某一点是否在这个区域。
实现这个功能我们需要对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;
}
这样就实现了以上我们提到的所有内容。