如何从谷歌地图API中的多边形区域除外 [英] How to except area from polygon in google maps api

问题描述

我有两个多边形（P1和P2）的坐标在Google地图上创建。当P2位于P1时如何从P1切断P2？
例如 http://quality.iro38.ru/CI/question_about_map.php

这是我的js：

  var triangleCoords = [ 
 new google.maps.LatLng（25.774252，-80.190262），
 google.maps.LatLng（18.466465，-66.118292），
 google.maps.LatLng（32.321384，-64.75737） ，
 new google.maps.LatLng（25.774252，-80.190262）
]; 
 var triangleCoords1 = [
 new google.maps.LatLng（29，-69），
 new google.maps.LatLng（23，-72），
 new google.maps .LatLng（25，-70），
 new google.maps.LatLng（29，-69）
]; 
 bermudaTriangle = new google.maps.Polygon（{
 paths：[triangleCoords，triangleCoords1]，
 strokeColor：'＃FF0000'，
 strokeOpacity：0.8，
 strokeWeight ：2，
 fillColor：'＃FF0000'，
 fillOpacity：0.35 
}）; 
 bermudaTriangle.setMap（map）; 
  

解决方案

您需要制作内部多边形的卷绕方向与外部多边形的缠绕方向相反。

a>

代码片段：

var map; 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}）; var bounds = new google.maps.LatLngBounds（）; var triangleCoords = [new google.maps.LatLng（25.774252，-80.190262），new google.maps.LatLng（18.466465，-66.118292），new google.maps.LatLng（32.321384，-64.75737），new google.maps.LatLng（ 25.774252，-80.190262）]; var triangleCoords1 = [new google.maps.LatLng（29，-69），new google.maps.LatLng（25，-70），new google.maps.LatLng（23，-72），new google.maps.LatLng 29，-69）]; for（var i = 0; i< triangleCoords.length; i ++）{bounds.extend（triangleCoords [i]）; } for（var i = 0; i< triangleCoords1.length; i ++）{bounds.extend（triangleCoords1 [i]）; } map.fitBounds（bounds）; bermudaTriangle = new google.maps.Polygon（{paths：[triangleCoords，triangleCoords1]，strokeColor：'＃FF0000'，strokeOpacity：0.8，strokeWeight：2，fillColor：'＃FF0000'，fillOpacity：0.35}）; bermudaTriangle.setMap（map）;} google.maps.event.addDomListener（window，load，initialize）;

  html，body，＃map_canvas {height：100％;宽度：100％; margin：0px; < script src =https：//   




I have coordinates of two polygons (P1 and P2) to create it on google maps. How cut P2 from P1 when P2 is located in P1? For example http://quality.iro38.ru/CI/question_about_map.php

This is my js:

var triangleCoords = [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737),
    new google.maps.LatLng(25.774252, -80.190262)
];
var triangleCoords1 = [
    new google.maps.LatLng(29,-69),
    new google.maps.LatLng(23,-72),
    new google.maps.LatLng(25,-70),
    new google.maps.LatLng(29,-69)
];
bermudaTriangle = new google.maps.Polygon({
    paths: [triangleCoords, triangleCoords1],
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
});
bermudaTriangle.setMap(map);

解决方案

You need to make the winding direction of the inner polygon opposite the winding direction of the outer polygon.

working fiddle

code snippet:

var map;

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
    });
  var bounds = new google.maps.LatLngBounds();
  var triangleCoords = [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737),
    new google.maps.LatLng(25.774252, -80.190262)
  ];
  var triangleCoords1 = [
    new google.maps.LatLng(29, -69),
    new google.maps.LatLng(25, -70),
    new google.maps.LatLng(23, -72),
    new google.maps.LatLng(29, -69)

  ];
  for (var i = 0; i < triangleCoords.length; i++) {
    bounds.extend(triangleCoords[i]);
  }
  for (var i = 0; i < triangleCoords1.length; i++) {
    bounds.extend(triangleCoords1[i]);
  }
  map.fitBounds(bounds);

  bermudaTriangle = new google.maps.Polygon({
    paths: [triangleCoords, triangleCoords1],
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}
google.maps.event.addDomListener(window, "load", initialize);

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>

这篇关于如何从谷歌地图API中的多边形区域除外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！