我正在使用谷歌地图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);
}
答案 0 :(得分：0)
多边形可以采用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"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>