Question

我一直在使用Google Maps Javascript API（V3）在地图上工作，点击后，根据点击的位置绘制一个圆圈（多边形）。在同一张地图上，我有另一个我认为是边界的多边形。当我在该边界内单击时，会创建多边形，但它会重叠。我希望它能在边界内绘制多边形，而不会重叠。

下面是脚本当前所做的图片：

How the script currently works.

这就是我希望脚本执行的操作：

How I would like the script to work.

以下是我到目前为止：

<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry"></script>
<script type="text/javascript">

var map;
var twinCities = new google.maps.LatLng(44.9833,-93.2667);
var polys = [];
var start = 0;
var end = 360;
var radiusMeters = 3218;
var testCSABoundary;
var bounds = [
    new google.maps.LatLng(45.00651098836318, -93.29441785812378),
    new google.maps.LatLng(45.00651098836318, -93.20996046066284),
    new google.maps.LatLng(44.956242131334214, -93.20996046066284),
    new google.maps.LatLng(44.956242131334214, -93.29441785812378),
];

function initialize() {
    var mapOptions = {
        zoom: 11,
        center: twinCities,
    };

    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    google.maps.event.addListener(map, 'click', function(e) {

        createCircles(e.latLng);

    });

    testCSABoundary = new google.maps.Polygon({
        strokeColor: '#000000',
        strokeOpacity: 1.00,
        strokeWeight: 2,
        fillOpacity: 0.00,
        map: map,
        center: twinCities, 
        clickable: false,
        paths: bounds,
    });
}

function createCircles(position) {

    var twopath = getArcPath(position, radiusMeters, start, end);

    var twopathRing = new google.maps.Polygon({
        paths: twopath,
        strokeColor: '#fead00',
        strokeOpacity: 0.45,
        strokeWeight: 1,
        fillColor: '#fead00',
        fillOpacity: 0.45,
        map: map,
        center: position,
    });

}

function getArcPath(center, radiusMeters, startAngle, endAngle, direction) {
    var point, previous,
        atEnd = false,
        points = [],
        a = startAngle,
        string = "new google.maps.LatLng";
    while (true) {
        point = google.maps.geometry.spherical.computeOffset(center, radiusMeters, a);
        points.push(point);
        if (a == endAngle){
            break;
        }
        a++;
        if (a > 360) {
            a = 1;
        }
    }
    if (direction == 'counterclockwise') {
        points = points.reverse();
    }

    for (var i = 0; i < points.length; i++) {
        if (google.maps.geometry.poly.containsLocation(points[i],testCSABoundary) == false) {
            points.splice(i ,1);
        }
    }

    return points;
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

<style>

body {
    font-family: sans-serif;
    margin: 0px;
    padding: 0px;
}

#map-canvas {
    border: 1px solid black;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

</style>

</head>
<body style="width: 600; height: 480;">
  <div id="map-canvas"></div><br>
</body>
</html>

我尝试在for循环中的getArcPath函数中使用google.maps.geometry.poly.containsLocation，如果返回false，则会从points数组中删除该点。但是，这似乎不起作用。

在考虑这个for循环的过程中，我得出的结论是，这可能不是解决这个问题的正确方法，因为它不能正确地绘制多边形，从而导致一个剪辑绘制的边界。我认为我可能需要使用contains（）和intersects（）函数的组合来使其正常工作，但我不确定从何处开始实现这两个函数。

*以下2015年5月26日添加的其他信息*

在看了JSTS库之后，我提出了一些伪代码，但我需要一些验证，我正在走上正轨。根据我一直在阅读的内容，似乎我需要将我的坐标从谷歌地图经纬度转换为JSTS坐标，然后在脚本运行后返回谷歌地图。下面是我的伪代码：

var jstsBoundary = convert2jsts(bounds);
var jststwopath = convert2jsts(twopath);

for (var i = 0; i < jststwopath.length; i++) {
    if(containsLocation(jststwopath[i], jstsBoundary) == false) {
        newPoint = latlng on jstsBoundary nearest to jststwopath[i]; 
        jststwopath.splice(i, 1, newPoint);
    }  
}

var gmapstwopath = convert2gmaps(jststwopath);

function convert2jsts(points) {
    //convert points from gmaps coords to jsts coords;
    return(jstspoints);
}

function convert2gmaps(points) {
    //convert points from jsts coords to gmaps coords;
    return(gmapspoints);
}

非常感谢提前。

基于点击位置用另一个多边形填充多边形边界

0 个答案: