我正在尝试在谷歌地图中渲染多个多边形,每个多边形都是从独立的外部单独geojson文件加载的,并且每个多边形都需要不同的样式。
关于该主题有很多类似的帖子,但没有似乎解决了多个独立外部 json 文件的加载问题,并且每个文件都需要一组不同的样式。
对于要在地图上显示的每个多边形,我的 JS 代码如下。我在这里注意到,我尝试使用不同的方法进行显示(以下是多种方法中的两种)。虽然它们都仍然显示,但无论我为描边和填充设置的值如何,它们都带有黑色描边,并且似乎都是 50% 的填充不透明度。
// MSOA polygon
var pathmsoa = map.data.loadGeoJson("msoa.json");
var msoaplot = {
strokeColor: '#ffffff',
strokeOpacity: 0.5,
strokeWeight: 2,
fillColor: '#800105',
fillOpacity: 0.1,
path: this.pathmsoa,
}
msoa = new google.maps.Polygon(msoaplot);
// LSOA polygon
var pathlsoa = map.data.loadGeoJson("lsoa.json");
var lsoa = new google.maps.Polygon({
path: this.pathlsoa,
strokeColor: '#ff0000',
strokeOpacity: 0.5,
strokeWeight: 1,
fillColor: '#800105',
fillOpacity: 0.8,
});
以上两个多边形显示如下:
唯一的其他一点是控制台返回一个
InvalidValueError: not an Array
值,但我无法理解为什么 - 考虑到我从不同来源和不同方法遵循的示例。
以不同方式设置多边形
GeoJSON
的一个选项是为每个多边形创建不同的 map.data
对象:
var polygon1 = new google.maps.Data();
polygon1.addGeoJson(geoJson1); // or loadGeoJson
// style for polygon1
// for options available see:
//
https://developers.google.com/maps/documentation/javascript/reference/data#Data.StyleOptions
polygon1.setStyle({
fillColor:"red",
fillOpacity: 0.5,
strokeColor:"green",
strokeWeight:2,
strokeOpacity:1.0
})
polygon1.setMap(map);
var polygon2 = new google.maps.Data();
polygon2.addGeoJson(geoJson2);
// style for polygon2
polygon2.setStyle({
fillColor:"blue",
fillOpacity: 0.5,
strokeColor:"orange",
strokeWeight:2,
strokeOpacity:1.0
});
polygon2.setMap(map);
代码片段:
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
zoom: 14,
center: { lat: 51.295, lng: -0.105 },
});
var polygon1 = new google.maps.Data();
polygon1.addGeoJson(geoJson1);
polygon1.setStyle({fillColor:"red", fillOpacity: 0.5, strokeColor:"green", strokeWeight:2, strokeOpacity:1.0})
polygon1.setMap(map);
var polygon2 = new google.maps.Data();
polygon2.addGeoJson(geoJson2);
polygon2.setStyle({fillColor:"blue", fillOpacity: 0.5, strokeColor:"orange", strokeWeight:2, strokeOpacity:1.0});
polygon2.setMap(map);
var geocoder = new google.maps.Geocoder();
geocoder.geocode("Old Coulsdon")
}
function geocode(request) {
console.log("request="+request)
geocoder
.geocode({address: request})
.then((result) => {
const { results } = result;
if (!marker) marker = new google.maps.Marker();
map.setCenter(results[0].geometry.location);
marker.setPosition(results[0].geometry.location);
marker.setMap(map);
return results;
})
.catch((e) => {
alert("Geocode was not successful for the following reason: " + e);
});
}
window.initMap = initMap;
var geoJson1 = {"type": "FeatureCollection","name": "old coulsdon","crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },"features": [{ "type": "Feature", "properties": { }, "geometry": { "type": "Polygon", "coordinates": [ [ [-0.100356,51.29494], [-0.103918,51.294457],[-0.103661,51.291424],[-0.098479,51.291941],[-0.100356,51.29494], ] ] } },]};
var geoJson2 = {"type": "FeatureCollection","name": "old coulsdon","crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },"features": [{ "type": "Feature", "properties": { }, "geometry": { "type": "Polygon", "coordinates": [ [ [-0.110356,51.29494], [-0.113918,51.294457],[-0.113661,51.291424],[-0.108479,51.291941],[-0.110356,51.29494], ] ] } },]};
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<!doctype html>
<html>
<head>
<title>Data Layer: Polygon</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly"
defer
></script>
</body>
</html>