如何在谷歌地图API中使用坐标数组绘制多边形
how to draw a polygon in google map API using array of coordinates?
我是JavaScript新手,正在尝试使用googlemapneneneba API绘制多边形。google.maps.Polygons函数中的默认路径接受以下格式的JSON:
var trianglecoords=[
{lat: 18.466, lng: -66.518},
{lat: 18.466, lng: -66.118},
{lat: 18.166, lng: -66.118},
];
但是我的格式是:
var trianglecoords=[
[18.466,-66.518],
[18.466,-66.118],
[18.166,-66.118],
];
使用我的格式,我看不到地图上的三角形。有人能帮我吗?
这是我的代码:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: 24.886, lng: -70.268},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
// Define the LatLng coordinates for the polygon's path.
var triangleCoords = [
[25.774, -80.190],
[18.466, -66.118],
[32.321,-64.757],
[25.774, -80.190]
];
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
}
您的格式不起作用。您需要将其转换为google.maps.LatLng
对象或google.maps.LatLngLiteral
对象的数组。
任一:
var points=[];
for(var i=0; i<triangleCoords.length; i++) {
points.push(new google.maps.LatLng(triangleCoords[i][0],
triangleCoords[i][1]));
}
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: points,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
或者:
var points=[];
for(var i=0; i<triangleCoords.length; i++) {
points.push({
lat: triangleCoords[i][0],
lng: triangleCoords[i][1]
});
}
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: points,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
代码片段:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {
lat: 24.886,
lng: -70.268
},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
// Define the LatLng coordinates for the polygon's path.
var triangleCoords = [
[25.774, -80.190],
[18.466, -66.118],
[32.321, -64.757],
[25.774, -80.190]
];
var points = [];
for (var i = 0; i < triangleCoords.length; i++) {
points.push({
lat: triangleCoords[i][0],
lng: triangleCoords[i][1]
});
}
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: points,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>
相关文章:
- 如何创建一个谷歌地图地理坐标数组
- 断言错误:断言失败:坐标数组的长度应与步幅匹配
- Javascript 地理位置:将坐标存储在数组中
- 将地理位置坐标放入数组中
- 检查鼠标光标是否在带坐标的数组范围内
- 如何在谷歌地图API中使用坐标数组绘制多边形
- 每个表的2D数组获取坐标JTSL,JAVASCRIPT
- 根据折线坐标数组创建高程剖面图
- 使用地理编码返回陆基坐标数组时出现问题
- Javascript - 字符串到坐标数组
- 将图像像素数据转换为坐标数组
- 从xml创建多边形坐标数组
- 如何循环遍历坐标数组
- 在javascript中搜索精确匹配的多维坐标数组
- 如何获得坐标数组的最大/最小边界
- 使用Javascript有效地从坐标数组中获得距离最短的一对坐标
- 在Google Maps API V3中使用LatLng坐标数组绘制折线
- 如何循环遍历坐标数组来为layerGroup创建地图标记
- 在坐标数组上循环并计算距离javascript
- 在JavaScript中创建坐标数组