Question

我目前正在Google地图上创建多边形（Javascript API），这样可以正常使用。

示例：

var myCountyCoords = [This is 187 geo locations]

var myCounty = new google.maps.Polygon({
        paths: myCountyCoords,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35
    });
myCounty.setMap(map);

有没有办法将此多边形转换为叠加层？（我的意思是好像用户使用绘图管理器在地图上绘制了这个多边形）

最终我尝试使用此多边形（来自Javascript API），以便我可以创建静态地图，以便在该静态地图上显示相同的多边形。

如果使用绘图管理器绘制多边形，则此板上的代码将完成此操作。

Answer 1

要回答您的直接问题，只需创建多边形，将其添加到地图，然后将overlays数组上的多边形作为“叠加”对象推送（两个属性，.overlay是多边形，和.type是google.maps.Polygon的google.maps.drawing.OverlayType.POLYGON [“polygon”]。

var myCounty = new google.maps.Polygon({
  paths: myCountyCoords,
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35,
  map: map
});
myCounty.setMap(map);
var overlay = {
  overlay: myCounty, 
  type: google.maps.drawing.OverlayType.POLYGON
};
overlays.push(overlay);

proof of concept fiddle

如果您需要的只是静态地图上的单个多边形，请拉出代码，将google.Maps.Polygon转换为此问题的静态地图（编码路径）：GMap Drawing tools to image jpeg

代码段

var map;

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(-27.37777, -51.592762),
    zoom: 16
  };

  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
  google.maps.event.addListener(map, 'click', function(evt) {
    document.getElementById('info').innerHTML = evt.latLng.toUrlValue(6);
  });
  var bounds = new google.maps.LatLngBounds();
  var myCountyCoords = [];
  for (var i = 0; i < polygonPath.length; i++) {
    var pt = new google.maps.LatLng(polygonPath[i][0], polygonPath[i][1]);
    myCountyCoords.push(pt);
    bounds.extend(pt)
  }
  map.fitBounds(bounds);
  var myCounty = new google.maps.Polygon({
    paths: myCountyCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map
  });
  myCounty.setMap(map);
  createStaticMap(myCounty);
}

google.maps.event.addDomListener(window, 'load', initialize);

function createStaticMap(polygon) {
  var fillC, strokeC, weight, path;

  var staticMap = "https://maps.googleapis.com/maps/api/staticmap?size=512x512&maptype=roadmap";
  path = encodeURIComponent(google.maps.geometry.encoding.encodePath(polygon.getPath()));
  fillC = polygon.get("fillColor");
  strokeC = polygon.get("strokeColor");
  weight = polygon.get("strokeWeight");
  staticMap += "&path=";
  if (typeof fillC != "undefined") staticMap += "fillcolor:" + fillC.replace(/#/, "0x");
  if (typeof weight != "undefined") staticMap += "%7Cweight:" + weight;
  else staticMap += "%7Cweight:0";
  if (typeof strokeC != "undefined") staticMap += "%7Ccolor:" + strokeC.replace(/#/, "0x");
  staticMap += "%7Cenc:" + path;
  document.getElementById('staticMap').innerHTML = staticMap;
  document.getElementById('imageholder').innerHTML = "<img src='" + staticMap + "' alt='static map' / > ";
  document.getElementById('urllen').innerHTML = "URL length =" + staticMap.length + " characters";

}
var polygonPath = [
  [-27.374244, -51.594844],
  [-27.375959, -51.593041],
  [-27.374892, -51.591496],
  [-27.375807, -51.589909],
  [-27.377598, -51.590595],
  [-27.376988, -51.593342],
  [-27.378665, -51.593771],
  [-27.379237, -51.591067],
  [-27.380875, -51.591454],
  [-27.380609, -51.59287],
  [-27.38198, -51.59317],
  [-27.381447, -51.59523],
  [-27.380189, -51.59493],
  [-27.380151, -51.595616],
  [-27.376836, -51.594758],
  [-27.376569, -51.595531]
];

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="imageholder"></div>
<div id="urllen"></div>
<div id="info"></div>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>
<div id="staticMap"></div>

Google Map：我可以将多边形转换为多边形的绘图管理器吗？

1 个答案: