我想使用API v3在Google地图中显示区域边界。我已经获得了客户端所覆盖区域的邮政编码列表,我已将这些邮政编码转换为LatLng坐标,并且可以使用它们创建多边形,但正如您所期望的那样,它是一堆乱七八糟的线条和不是一个坚固的形状区域。
任何人都知道这是否可行,如果可行,该如何做?或者采用不同的方式。代码I使用以下内容:
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 55.921772, lng: -3.383983},
scrollwheel: false,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true
});
// Define the LatLng coordinates for the polygon's path.
var triangleCoords = [
new google.maps.LatLng(55.948969,-3.1927988),
new google.maps.LatLng(55.949292,-3.209399),
new google.maps.LatLng(55.957032,-3.1850223),
new google.maps.LatLng(55.929196,-3.2089489),
new google.maps.LatLng(55.934519,-3.2131166),
new google.maps.LatLng(55.924534,-3.2096679),
new google.maps.LatLng(55.901564,-3.2035307),
new google.maps.LatLng(55.940591,-3.2170048),
new google.maps.LatLng(55.943847,-3.2184679),
new google.maps.LatLng(55.932823,-3.2462462),
new google.maps.LatLng(55.924084,-3.2938003),
new google.maps.LatLng(55.948636,-3.3239403),
new google.maps.LatLng(55.94727,-3.2158532),
new google.maps.LatLng(55.946459,-3.2359557),
new google.maps.LatLng(55.942119,-3.2790791),
new google.maps.LatLng(55.943678,-3.2820926),
new google.maps.LatLng(55.933458,-3.2867013),
new google.maps.LatLng(55.907231,-3.2498242),
new google.maps.LatLng(55.914285,-3.2391396),
new google.maps.LatLng(55.929872,-3.2483283),
new google.maps.LatLng(55.919613,-3.272673),
new google.maps.LatLng(55.913635,-3.2773089),
new google.maps.LatLng(55.953223,-3.1155757),
new google.maps.LatLng(55.951535,-3.1124523),
new google.maps.LatLng(55.944854,-3.1050555),
new google.maps.LatLng(55.931274,-3.1456767),
new google.maps.LatLng(55.938277,-3.1758846),
new google.maps.LatLng(55.919988,-3.1677619),
new google.maps.LatLng(55.907921,-3.1339982),
new google.maps.LatLng(55.899518,-3.1649876),
new google.maps.LatLng(55.955011,-3.1932569),
new google.maps.LatLng(55.953699,-3.1905739),
new google.maps.LatLng(55.951683,-3.2010498),
new google.maps.LatLng(55.951121,-3.2034185),
new google.maps.LatLng(55.877027,-3.1487295),
new google.maps.LatLng(55.943146,-3.0559971),
new google.maps.LatLng(55.943718,-3.047895),
new google.maps.LatLng(55.939247,-3.0130501),
new google.maps.LatLng(55.892996,-3.0728633),
new google.maps.LatLng(55.89186,-3.0692661),
new google.maps.LatLng(55.892996,-3.0728633),
new google.maps.LatLng(55.956248,-3.4049741),
new google.maps.LatLng(55.958401,-3.204173),
new google.maps.LatLng(55.953391,-3.2083257),
new google.maps.LatLng(55.947542,-3.2146128),
new google.maps.LatLng(55.943346,-3.2109749),
new google.maps.LatLng(55.945203,-3.2049162),
new google.maps.LatLng(55.973614,-3.3522429),
new google.maps.LatLng(55.959293,-2.9831886),
new google.maps.LatLng(55.958761,-3.2259363),
new google.maps.LatLng(55.958258,-3.2509238),
new google.maps.LatLng(55.954508,-3.2162083),
new google.maps.LatLng(55.969754,-3.2567425),
new google.maps.LatLng(55.965345,-3.2713865),
new google.maps.LatLng(55.966799,-3.2759201),
new google.maps.LatLng(55.961259,-3.2624101),
new google.maps.LatLng(55.960523,-3.3189479),
new google.maps.LatLng(55.980282,-3.2222259),
new google.maps.LatLng(55.970837,-3.2150703),
new google.maps.LatLng(55.972055,-3.1971305),
new google.maps.LatLng(55.977169,-3.1812151),
new google.maps.LatLng(55.970188,-3.1726547),
new google.maps.LatLng(55.970989,-3.1715573),
new google.maps.LatLng(55.9706,-3.1709047),
new google.maps.LatLng(55.969318,-3.1629671),
new google.maps.LatLng(55.958457,-3.1835442),
new google.maps.LatLng(55.954315,-3.1853397),
new google.maps.LatLng(55.956023,-3.1607265),
new google.maps.LatLng(55.955162,-3.15005),
new google.maps.LatLng(55.950521,-3.1836543),
new google.maps.LatLng(55.94698,-3.1866047),
new google.maps.LatLng(55.934593,-3.1935895),
new google.maps.LatLng(55.934464,-3.1948181),
new google.maps.LatLng(55.930516,-3.1756174),
new google.maps.LatLng(55.97862,-3.2535203),
new google.maps.LatLng(55.951962,-3.1749222)
];
// Construct the polygon.
var areaCovered = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.25
});
areaCovered.setMap(map);
}
</script>
答案 0 :(得分:1)
好的,这是我承诺的代码示例。这将为您提供一个方形/矩形多边形,其中包含triangleCoords中的所有点。
// create new LatLngBounds
var bounds = new google.maps.LatLngBounds();
// extend bounds to contain each coordinate
for (var i = 0, i_end = triangleCoords.length; i < i_end; i++) {
bounds.extend(triangleCoords[i]);
}
// get the NSEW corners of the bounds
var NE = bounds.getNorthEast();
var SW = bounds.getSouthWest();
var SE = { lat: SW.lat(), lng: NE.lng() };
var NW = { lat: NE.lat(), lng: SW.lng() };
// Construct the polygon.
var areaCovered = new google.maps.Polygon({
paths: [NE, SE, SW, NW],
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.25
});
areaCovered.setMap(map);
我还想澄清为什么你的代码创建了一堆乱七八糟的行。多边形将根据您提供的坐标的顺序构造其边界。要了解我正在谈论的内容,您可以将我的示例中的顺序更改为此paths: [NE, SW, SE, NW]
。
为了给你一个视觉效果,你可以把它想象成连接点的游戏。如果你没有连接这些点,那么你最终会得到一些乱七八糟的线,而不是一个可爱的笑皮卡丘。
答案 1 :(得分:0)
我的错误,Polygon不能关闭。
Bevor编辑: 您的多边形必须关闭。 与https://developers.google.com/maps/documentation/javascript/shapes中一样,我认为你从中得到了你的来源,最后和第一点是相同的。