Google Map：我可以将多边形转换为多边形的绘图管理器吗？ [英] Google Map: Can I convert a polygon into a drawing manager of a polygon?
本文介绍了Google Map：我可以将多边形转换为多边形的绘图管理器吗？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我目前正在Google地图（Javascript API）上创建多边形，并且这种方式正常。
$ b 示例：
var myCountyCoords = [这是187个地理位置]
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中获取这个多边形我可以创建一个静态地图，以便在该静态地图上显示相同的多边形。
该板上有代码可以在多边形绘制时使用为了回答您的直接问题，只需创建多边形，将其添加到地图，然后推入该多边形即可。
在叠加数组中作为叠加对象（两个属性，即多边形的.overlay，以及google.maps.drawing.OverlayType.POLYGON的.type [ $ poly $> google.maps.Polygon ）。 var myCounty = new google.maps.Polygon（{
paths：myCountyCoords，
strokeColor：'＃FF0000'，
strokeOpacity：0.8，
strokeWeight：2，
fillColor：'＃FF0000'，
fillO pacity：0.35，
map：map
}）;
myCounty.setMap（map）;
var overlay = {
overlay：myCounty，
type：google.maps.drawing.OverlayType.POLYGON
};
overlays.push（overlay）;
如果您需要的只是静态地图上的单个多边形，请拉代码以翻译谷歌。 Maps.Polygon映射为静态映射（编码路径）： GMap绘图工具来映射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（地图）; 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;否则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'/>;如果你想使用这个方法，你可以使用下面的方法：var polygonPath = [[-27.374244，-51.594844]，[-27.375959，-51.593041]，[-27.374892， [-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％;宽度：100％; margin：0px; < script src =https：//
I am currently creating polygons on my Google map (Javascript API) and this works fine.
Example:
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);
Is there a way to convert this polygon to an overlay? (By that I mean as if the user drew this polygon themselves on the map using the Drawing Manager)
Ultimately I am trying to take this polygon (from Javascript API) so that I can create a static map so that the same polygon displays on that static map.
There was code on this board that will accomplish this if the polygon was drawn on using the drawing manager.
解决方案
To answer your direct question, just create the polygon, add it to the map, then push that polygon on the overlays array as an "overlay" object (two properties, the .overlay which is the polygon, and .type which is google.maps.drawing.OverlayType.POLYGON ["polygon"] for a google.maps.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);
If all you need is a single polygon on a static map, pull the code to translate a google.Maps.Polygon to a Static Map (encoded path) out of this question: GMap Drawing tools to image jpeg
code snippet:
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：我可以将多边形转换为多边形的绘图管理器吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
