多个多边形与多种颜色在一个谷歌地图
Multiple Polygons with Multiple Colors on one Google Map
我想有多个不同风格的多个多边形在同一谷歌地图。这是我目前所知道的。它只是一个勾勒西海岸的多边形。
每当我尝试推另一个不同样式的多边形时，我就会破坏页面。
如果我能得到多组坐标来绘制单独的多边形，每个多边形都有不同的颜色，那将是理想的。
我离开了百慕大三角的坐标(来自google API教程)，尝试与西海岸坐标一起绘图。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Health South</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// This example creates a simple polygon representing the Bermuda Triangle.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lng: -115.136719, lat: 36.173357,},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
// Define the LatLng coordinates for the polygon's path.
var westCoords = [
{lng: -124.208679, lat: 41.998284},
{lng: -111.049805, lat: 42.012571},
{lng: -111.044312, lat: 41.004775},
{lng: -102.062988, lat: 41.013066},
{lng: -102.052002, lat: 37.002553},
{lng: -103.007813, lat: 37.002553},
{lng: -103.007813, lat: 36.509636},
{lng: -103.095703, lat: 31.989442},
{lng: -106.413574, lat: 32.026706},
{lng: -106.457520, lat: 31.802893},
{lng: -108.204346, lat: 31.793555},
{lng: -108.226318, lat: 31.334871},
{lng: -111.071777, lat: 31.334871},
{lng: -114.818115, lat: 32.509762},
{lng: -114.796143, lat: 32.565333},
{lng: -114.812622, lat: 32.625497},
{lng: -114.719238, lat: 32.727220},
{lng: -117.130737, lat: 32.542183},
{lng: -117.163696, lat: 32.664813},
{lng: -117.199402, lat: 32.687931},
{lng: -117.237854, lat: 32.669437},
{lng: -117.265320, lat: 32.713355},
{lng: -117.259827, lat: 32.801128},
{lng: -117.281799, lat: 32.835751},
{lng: -117.259827, lat: 32.863439},
{lng: -117.292786, lat: 33.029390},
{lng: -117.339478, lat: 33.137551},
{lng: -117.498779, lat: 33.332823},
{lng: -117.765198, lat: 33.518499},
{lng: -118.119507, lat: 33.756315},
{lng: -118.311768, lat: 33.715202},
{lng: -118.427124, lat: 33.765449},
{lng: -118.438110, lat: 33.897777},
{lng: -118.493042, lat: 33.988918},
{lng: -118.784180, lat: 34.020795},
{lng: -119.152222, lat: 34.107256},
{lng: -119.355469, lat: 34.279914},
{lng: -119.608154, lat: 34.425036},
{lng: -120.437622, lat: 34.461277},
{lng: -120.651855, lat: 34.606085},
{lng: -120.684814, lat: 35.128894},
{lng: -120.904541, lat: 35.263562},
{lng: -120.893555, lat: 35.424868},
{lng: -121.464844, lat: 35.942436},
{lng: -121.948242, lat: 36.509636},
{lng: -121.794434, lat: 36.835668},
{lng: -122.003174, lat: 36.958671},
{lng: -122.376709, lat: 37.212832},
{lng: -122.508545, lat: 37.561997},
{lng: -122.508545, lat: 37.744657},
{lng: -122.750244, lat: 37.952861},
{lng: -122.926025, lat: 38.056742},
{lng: -123.717041, lat: 38.899583},
{lng: -123.750000, lat: 38.925229},
{lng: -123.717041, lat: 39.010648},
{lng: -123.793945, lat: 39.368279},
{lng: -123.804932, lat: 39.690281},
{lng: -124.244385, lat: 40.187267},
{lng: -124.365234, lat: 40.279526},
{lng: -124.409180, lat: 40.438586},
{lng: -124.156494, lat: 40.913513},
{lng: -124.178467, lat: 41.112469},
{lng: -124.068604, lat: 41.483891},
{lng: -124.244385, lat: 41.795888},
{lng: -124.208679, lat: 41.998284}
];
// Define the LatLng coordinates for the polygon's path.
var triangleCoords = [
{lat: 25.774, lng: -80.190},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757},
{lat: 25.774, lng: -80.190}
];
// Construct West polygon.
var west = new google.maps.Polygon({
paths: westCoords,
strokeColor: '#7e7e7e',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#7e7e7e',
fillOpacity: 0.55
});
west.setMap(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"></script>
</body>
</html>
应该能行
// Construct West polygon.
var west = new google.maps.Polygon({
paths: westCoords,
strokeColor: '#7e7e7e',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#7e7e7e',
fillOpacity: 0.55
});
west.setMap(map);
// Construct bermuda .
var bermuda= new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.55
});
bermuda.setMap(map);
回答了我自己的问题。我找到了一个正确的方法来做这件事!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Health South</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// This example creates a simple polygon representing the Bermuda Triangle.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lng: -115.136719, lat: 36.173357,},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
function addPoly(coorArray,sColor,sOpacity,weight,fColor,fOpacity)
{
var poly = new google.maps.Polygon({
paths: coorArray,
strokeColor: sColor,
strokeOpacity: sOpacity,
strokeWeight: weight,
fillColor: fColor,
fillOpacity: fOpacity
});
return poly;
};
// Define the LatLng coordinates for the polygon's path.
var westCoords = [
{lng: -124.208679, lat: 41.998284},
{lng: -111.049805, lat: 42.012571},
{lng: -111.044312, lat: 41.004775},
{lng: -102.062988, lat: 41.013066},
{lng: -102.052002, lat: 37.002553},
{lng: -103.007813, lat: 37.002553},
{lng: -103.007813, lat: 36.509636},
{lng: -103.095703, lat: 31.989442},
{lng: -106.413574, lat: 32.026706},
{lng: -106.457520, lat: 31.802893},
{lng: -108.204346, lat: 31.793555},
{lng: -108.226318, lat: 31.334871},
{lng: -111.071777, lat: 31.334871},
{lng: -114.818115, lat: 32.509762},
{lng: -114.796143, lat: 32.565333},
{lng: -114.812622, lat: 32.625497},
{lng: -114.719238, lat: 32.727220},
{lng: -117.130737, lat: 32.542183},
{lng: -117.163696, lat: 32.664813},
{lng: -117.199402, lat: 32.687931},
{lng: -117.237854, lat: 32.669437},
{lng: -117.265320, lat: 32.713355},
{lng: -117.259827, lat: 32.801128},
{lng: -117.281799, lat: 32.835751},
{lng: -117.259827, lat: 32.863439},
{lng: -117.292786, lat: 33.029390},
{lng: -117.339478, lat: 33.137551},
{lng: -117.498779, lat: 33.332823},
{lng: -117.765198, lat: 33.518499},
{lng: -118.119507, lat: 33.756315},
{lng: -118.311768, lat: 33.715202},
{lng: -118.427124, lat: 33.765449},
{lng: -118.438110, lat: 33.897777},
{lng: -118.493042, lat: 33.988918},
{lng: -118.784180, lat: 34.020795},
{lng: -119.152222, lat: 34.107256},
{lng: -119.355469, lat: 34.279914},
{lng: -119.608154, lat: 34.425036},
{lng: -120.437622, lat: 34.461277},
{lng: -120.651855, lat: 34.606085},
{lng: -120.684814, lat: 35.128894},
{lng: -120.904541, lat: 35.263562},
{lng: -120.893555, lat: 35.424868},
{lng: -121.464844, lat: 35.942436},
{lng: -121.948242, lat: 36.509636},
{lng: -121.794434, lat: 36.835668},
{lng: -122.003174, lat: 36.958671},
{lng: -122.376709, lat: 37.212832},
{lng: -122.508545, lat: 37.561997},
{lng: -122.508545, lat: 37.744657},
{lng: -122.750244, lat: 37.952861},
{lng: -122.926025, lat: 38.056742},
{lng: -123.717041, lat: 38.899583},
{lng: -123.750000, lat: 38.925229},
{lng: -123.717041, lat: 39.010648},
{lng: -123.793945, lat: 39.368279},
{lng: -123.804932, lat: 39.690281},
{lng: -124.244385, lat: 40.187267},
{lng: -124.365234, lat: 40.279526},
{lng: -124.409180, lat: 40.438586},
{lng: -124.156494, lat: 40.913513},
{lng: -124.178467, lat: 41.112469},
{lng: -124.068604, lat: 41.483891},
{lng: -124.244385, lat: 41.795888},
{lng: -124.208679, lat: 41.998284}
];
// Define the LatLng coordinates for the polygon's path.
var triangleCoords = [
{lat: 25.774, lng: -80.190},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757},
{lat: 25.774, lng: -80.190}
];
//var poly = [];
// Construct West polygon.
var west = addPoly(westCoords,'#7e7e7e',0.8,2,'#7e7e7e',.55);
west.setMap(map);
var tri = addPoly(triangleCoords,'#7e7e7e',0.8,2,'#fff',.55);
tri.setMap(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"></script>
</body>
</html>
相关文章：
- 调用一个“;默认瓦片”;在谷歌地图中
- 如何创建一个谷歌地图地理坐标数组
- 为位于路线上的谷歌地图标记(起点和终点）设置一个信息窗口
- 如何在谷歌地图中突出显示一个州点击一个国家的任何区域
- 使用谷歌地图:一个返回undefined的自定义javascript函数
- 谷歌地图API-获取信息窗口打开时，点击一个圆圈
- 从模态内部的主体复制一个谷歌地图
- 使用两个不同表中的值在一个谷歌地图上显示标记
- 如何制作一个谷歌地图标记，随着地图缩放而缩小/缩小大小
- 如何添加一个谷歌地图标记
- 我们可以知道一个谷歌地图是否已经初始化
- 如何隐藏一个谷歌地图圆圈对象后，不同的时间间隔
- 创建一个谷歌地图
- 显示一个谷歌地图上的引导模式
- 多个多边形与多种颜色在一个谷歌地图
- 包括3个图像在一个谷歌地图标记
- 值从返回，到一个谷歌地图功能
- 你能在虚拟元素中创建一个谷歌地图吗?
- 集成一个谷歌地图javascript API到博客
- 创建一个谷歌地图界面
