Question

我找到了一个模拟这种行为的页面：Link（这对我来说是可以接受的解决方案），但是当我将自己的坐标放到示例中时 - 它不能简单地工作。例如：

var myPoints = [
    new google.maps.LatLng(49.992148, 20.116691),
    new google.maps.LatLng(49.958793, 20.099713),
    new google.maps.LatLng(49.961392, 20.099613),
    new google.maps.LatLng(49.967183, 20.101399),
    new google.maps.LatLng(49.967362, 20.099692),
    new google.maps.LatLng(49.966189, 20.097904),
    new google.maps.LatLng(49.965657, 20.096844),
    new google.maps.LatLng(49.964799, 20.095155),
    new google.maps.LatLng(49.969056, 20.092539),
    new google.maps.LatLng(49.978430, 20.096734),
    new google.maps.LatLng(49.992148, 20.116691)
];
var oldPoints = [
    new google.maps.LatLng(49.939952, 20.089703),
    new google.maps.LatLng(49.936804, 20.102749),
    new google.maps.LatLng(49.938516, 20.117512),
    new google.maps.LatLng(49.937687, 20.132961),
    new google.maps.LatLng(49.941941, 20.145321),
    new google.maps.LatLng(49.963368, 20.140686),
    new google.maps.LatLng(49.974354, 20.099745),
    new google.maps.LatLng(49.958841, 20.080090),
    new google.maps.LatLng(49.939952, 20.089703)
];

工作演示：

var polygonMask = new google.maps.Polygon({
  map:map,
  strokeColor: '#000000',
  strokeOpacity: 0.5,
  strokeWeight: 2,
  fillColor: '#CACACA',
  fillOpacity: 0.7,
  paths: [[new google.maps.LatLng(49.441831, 19.170290),
           new google.maps.LatLng(50.501727, 19.170290),
           new google.maps.LatLng(50.501727, 20.962435),
           new google.maps.LatLng(49.441831, 20.962435),
           new google.maps.LatLng(49.441831, 19.170290)],
          oldPoints                                         <--
  ]
});

当我将“oldPoints”切换为“myPoints”时 - 它不起作用，这意味着一切都变灰了。你知道那些点是否有任何具体顺序或为什么myPoints不起作用？我找不到有关该问题的任何信息。

Answer 1

＆＃34;洞＆＃34;需要在外边界的相反方向上卷绕。

代码段：

＆＃13;

function initialize() {
    var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(37.4419, -122.1419),
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var polygonMask = new google.maps.Polygon({
        map: map,
        strokeColor: '#000000',
        strokeOpacity: 0.5,
        strokeWeight: 2,
        fillColor: '#CACACA',
        fillOpacity: 0.7,
        paths: [
            [new google.maps.LatLng(49.441831, 19.170290),
            new google.maps.LatLng(50.501727, 19.170290),
            new google.maps.LatLng(50.501727, 20.962435),
            new google.maps.LatLng(49.441831, 20.962435),
            new google.maps.LatLng(49.441831, 19.170290)],
            revPoints
        ]
    });
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < polygonMask.getPath().getLength(); i++) {
        bounds.extend(polygonMask.getPath().getAt(i));
    }
    map.setCenter(bounds.getCenter());
    
}
google.maps.event.addDomListener(window, "load", initialize);
var geocoder;
var map;
var myPoints = [
    new google.maps.LatLng(49.992148, 20.116691),
    new google.maps.LatLng(49.958793, 20.099713),
    new google.maps.LatLng(49.961392, 20.099613),
    new google.maps.LatLng(49.967183, 20.101399),
    new google.maps.LatLng(49.967362, 20.099692),
    new google.maps.LatLng(49.966189, 20.097904),
    new google.maps.LatLng(49.965657, 20.096844),
    new google.maps.LatLng(49.964799, 20.095155),
    new google.maps.LatLng(49.969056, 20.092539),
    new google.maps.LatLng(49.978430, 20.096734),
    new google.maps.LatLng(49.992148, 20.116691)
];
var oldPoints = [
    new google.maps.LatLng(49.939952, 20.089703),
    new google.maps.LatLng(49.936804, 20.102749),
    new google.maps.LatLng(49.938516, 20.117512),
    new google.maps.LatLng(49.937687, 20.132961),
    new google.maps.LatLng(49.941941, 20.145321),
    new google.maps.LatLng(49.963368, 20.140686),
    new google.maps.LatLng(49.974354, 20.099745),
    new google.maps.LatLng(49.958841, 20.080090),
    new google.maps.LatLng(49.939952, 20.089703)
];

var revPoints =[];
for (var i=1;i<=myPoints.length;i++) {
    revPoints.push(myPoints[myPoints.length-i]);
}

＆＃13;

html, body, #map_canvas {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

＆＃13;

除某些区域外，是否可以将地图灰显？

1 个答案: