在谷歌地图API中获得多个多边形
get multiple polygons in google maps API
我使用谷歌地图API搜索房屋在不同的地方在一个城市。所有的房子都将有标记，用户将根据自己的兴趣在标记周围绘制多个多边形。
我需要检查用户选择的所有位置，并仅在地图中显示这些标记。使用我的代码，我能够完成它，但是遇到了一些问题
一旦用户绘制第一个多边形，我将其存储在一个变量中，然后将其与第二个多边形的坐标合并，并对所有多边形重复相同的操作。所有多边形的坐标都在一个对象中。每当我绘制多个多边形时它们都会与一条折线相连因为我将它们保存在一个对象中并将其发送给mapOptions。
如何解决这个问题??以下是代码，当用户绘制多边形时，我正在使用。我希望所有的多边形都是相互独立的
function drawFreeHand(){
//the polygon
poly = new google.maps.Polyline({map:map,clickable:false});
//move-listener
var move = google.maps.event.addListener(map,'mousemove',function(e){
poly.getPath().push(e.latLng);
});
//mouseup-listener
google.maps.event.addListenerOnce(map,'mouseup',function(e){
google.maps.event.removeListener(move);
var path = poly.getPath();
poly.setMap(null);
var theArrayofLatLng = path.j;
var ArrayforPolygontoUse = GDouglasPeucker(theArrayofLatLng,50);
multi_poly = myFunction1(ArrayforPolygontoUse)
console.log(multi_poly);
var polyOptions = {
map: map,
fillColor: '#0099FF',
fillOpacity: 0.7,
strokeColor: '#AA2143',
strokeWeight: 2,
clickable: false,
zIndex: 1,
path:multi_poly,
editable: false
}
poly = new google.maps.Polygon(polyOptions);
});
}
function myFunction1(myVar) {
if(ArrayforPolygontoUse != undefined) {
str1 = ArrayforPolygontoUse;
}
else {
var str1 = [];
}
return ArrayforPolygontoUse = $.merge(str1,myVar);
}
多边形可以接受google.maps.LatLng对象数组的数组。如果你想保持路径的分离，你就需要这样做。
function drawFreeHand(){
//the polygon
poly = new google.maps.Polyline({map:map,clickable:false});
//move-listener
var move = google.maps.event.addListener(map,'mousemove',function(e){
poly.getPath().push(e.latLng);
});
//mouseup-listener
google.maps.event.addListenerOnce(map,'mouseup',function(e){
google.maps.event.removeListener(move);
var path = poly.getPath();
poly.setMap(null);
var theArrayofLatLng = path.getArray();
var ArrayforPolygontoUse = GDouglasPeucker(theArrayofLatLng,50);
if (poly && poly.getPaths) {
// if already has one or more paths, get the existing paths
multi_poly = poly.getPaths();
multi_poly_path.push(ArrayforPolygontoUse);
} else {
// first path
multi_poly = ArrayforPolygontoUse;
}
var polyOptions = {
map: map,
fillColor: '#0099FF',
fillOpacity: 0.7,
strokeColor: '#AA2143',
strokeWeight: 2,
clickable: false,
zIndex: 1,
paths:multi_poly,
editable: false
}
poly = new google.maps.Polygon(polyOptions);
});
}
概念验证
代码片段:
var geocoder;
var map;
var ArrayforPolygontoUse = [];
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(map, 'rightclick', drawFreeHand);
}
google.maps.event.addDomListener(window, "load", initialize);
function drawFreeHand() {
//the polygon
poly = new google.maps.Polyline({
map: map,
clickable: false
});
//move-listener
var move = google.maps.event.addListener(map, 'mousemove', function(e) {
poly.getPath().push(e.latLng);
});
//mouseup-listener
google.maps.event.addListenerOnce(map, 'mouseup', function(e) {
google.maps.event.removeListener(move);
var path = poly.getPath();
poly.setMap(null);
var theArrayofLatLng = path.getArray();
var ArrayforPolygontoUse = GDouglasPeucker(theArrayofLatLng, 50);
if (poly && poly.getPaths) {
multi_poly = poly.getPaths();
multi_poly_path.push(ArrayforPolygontoUse);
} else {
multi_poly = ArrayforPolygontoUse;
}
// multi_poly = myFunction1(ArrayforPolygontoUse)
// console.log(multi_poly);
var polyOptions = {
map: map,
fillColor: '#0099FF',
fillOpacity: 0.7,
strokeColor: '#AA2143',
strokeWeight: 2,
clickable: false,
zIndex: 1,
paths: multi_poly,
editable: false
}
poly = new google.maps.Polygon(polyOptions);
});
}
// from http://stackoverflow.com/questions/16121236/smoothing-gps-tracked-route-coordinates
/* Stack-based Douglas Peucker line simplification routine
returned is a reduced google.maps.LatLng array
After code by Dr. Gary J. Robinson,
Environmental Systems Science Centre,
University of Reading, Reading, UK
*/
function GDouglasPeucker(source, kink)
/* source[] Input coordinates in google.maps.LatLngs */
/* kink in metres, kinks above this depth kept */
/* kink depth is the height of the triangle abc where a-b and b-c are two consecutive line segments */
{
var n_source, n_stack, n_dest, start, end, i, sig;
var dev_sqr, max_dev_sqr, band_sqr;
var x12, y12, d12, x13, y13, d13, x23, y23, d23;
var F = ((Math.PI / 180.0) * 0.5);
var index = new Array(); /* aray of indexes of source points to include in the reduced line */
var sig_start = new Array(); /* indices of start & end of working section */
var sig_end = new Array();
/* check for simple cases */
if (source.length < 3) return (source); /* one or two points */
/* more complex case. initialize stack */
n_source = source.length;
band_sqr = kink * 360.0 / (2.0 * Math.PI * 6378137.0); /* Now in degrees */
band_sqr *= band_sqr;
n_dest = 0;
sig_start[0] = 0;
sig_end[0] = n_source - 1;
n_stack = 1;
/* while the stack is not empty ... */
while (n_stack > 0) {
/* ... pop the top-most entries off the stacks */
start = sig_start[n_stack - 1];
end = sig_end[n_stack - 1];
n_stack--;
if ((end - start) > 1) { /* any intermediate points ? */
/* ... yes, so find most deviant intermediate point to
either side of line joining start & end points */
x12 = (source[end].lng() - source[start].lng());
y12 = (source[end].lat() - source[start].lat());
if (Math.abs(x12) > 180.0) x12 = 360.0 - Math.abs(x12);
x12 *= Math.cos(F * (source[end].lat() + source[start].lat())); /* use avg lat to reduce lng */
d12 = (x12 * x12) + (y12 * y12);
for (i = start + 1, sig = start, max_dev_sqr = -1.0; i < end; i++) {
x13 = (source[i].lng() - source[start].lng());
y13 = (source[i].lat() - source[start].lat());
if (Math.abs(x13) > 180.0) x13 = 360.0 - Math.abs(x13);
x13 *= Math.cos(F * (source[i].lat() + source[start].lat()));
d13 = (x13 * x13) + (y13 * y13);
x23 = (source[i].lng() - source[end].lng());
y23 = (source[i].lat() - source[end].lat());
if (Math.abs(x23) > 180.0) x23 = 360.0 - Math.abs(x23);
x23 *= Math.cos(F * (source[i].lat() + source[end].lat()));
d23 = (x23 * x23) + (y23 * y23);
if (d13 >= (d12 + d23)) dev_sqr = d23;
else if (d23 >= (d12 + d13)) dev_sqr = d13;
else dev_sqr = (x13 * y12 - y13 * x12) * (x13 * y12 - y13 * x12) / d12; // solve triangle
if (dev_sqr > max_dev_sqr) {
sig = i;
max_dev_sqr = dev_sqr;
}
}
if (max_dev_sqr < band_sqr) { /* is there a sig. intermediate point ? */
/* ... no, so transfer current start point */
index[n_dest] = start;
n_dest++;
} else {
/* ... yes, so push two sub-sections on stack for further processing */
n_stack++;
sig_start[n_stack - 1] = sig;
sig_end[n_stack - 1] = end;
n_stack++;
sig_start[n_stack - 1] = start;
sig_end[n_stack - 1] = sig;
}
} else {
/* ... no intermediate points, so transfer current start point */
index[n_dest] = start;
n_dest++;
}
}
/* transfer last point */
index[n_dest] = n_source - 1;
n_dest++;
/* make return array */
var r = new Array();
for (var i = 0; i < n_dest; i++)
r.push(source[index[i]]);
return r;
}html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>相关文章：
- 如何获取谷歌地图多边形的当前fillColor
- 在谷歌地图V3上选择多边形
- 谷歌地图多边形减慢浏览器速度
- 在谷歌地图上为每个“多边形”生成新的多段线;日期“;来自mysql的值
- 谷歌地图 api v3 搜索多边形没有鼠标事件
- 单击角度谷歌地图中的多边形时如何显示窗口
- 谷歌地图/融合表Javascript HTML赢得't显示/可视化所有多边形数据(通过色标）
- CartoDb+谷歌地图多边形
- 如何在谷歌地图中制作一个覆盖世界的多边形
- 从谷歌地图drawingManager V3中删除多边形
- 如何在谷歌地图API中使用坐标数组绘制多边形
- 多边形中心谷歌地图JavaScript API v3
- 多边形过多的谷歌地图会导致iOS崩溃
- 谷歌地图多边形悬停可点击
- 检测谷歌地图 v3 多边形上的鼠标事件的 shiftKey
- 谷歌地图绘制多边形并警告重叠
- 将 XML 多边形转换为谷歌地图
- 谷歌地图多边形
- 多边形谷歌地图中的多个孔在迭代数组时
- 在多边形谷歌地图中添加多个AddListener
