在我的Web应用程序中,我们需要在Google地图图块上显示彩色的多边形。我正在将数据作为geoJson
添加到Google Map。示例geoJson
如下所示。
var geoJson = {
"type": "FeatureCollection",
"count": 1,
"features": [
{
"id": 4813444,
"type": "Feature",
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[
174.7195396833,
-36.8564663333
],
[
174.7196494333,
-36.8563847667
],
[
174.7196634333,
-36.85637435
],
[
174.7196478167,
-36.8563614167
],
[
174.7193567667,
-36.8561201667
],
[
174.7192242167,
-36.8562234167
],
[
174.7195123,
-36.8564622333
],
[
174.7195278333,
-36.8564751167
],
[
174.7195396833,
-36.8564663333
]
]
]
]
},
"properties": {
"color": "#232121"
}
}
]
}
如下添加[[Json到Google地图。
map.data.addGeoJson(geoJson);
以下代码用于在彩色多边形上设置样式。
map.data.setStyle(function(feature) { var color = feature.getProperty('color'); return({ fillColor: color, strokeWeight: 0 }); });
这里的彩色瓷砖编号由于颜色而不清楚。可以如下图所示。我的问题是,
使用this fiddle给我解决方案。
需要平铺外观如下。非常感谢您提供帮助或提示,请继续进行。
我正在发布,因为这将对在此方面苦苦挣扎的人有所帮助。
我的方法,
OverlayView
。StyledMapType
OverlayView
]上方设置到现有地图。zIndex
设置样式[[firstChild
。 var overlay = new google.maps.OverlayView();
var labelsMapType = new google.maps.StyledMapType([
{elementType: 'labels.text.fill', stylers: [{color: '#777777'}]},
{elementType: 'labels.text.stroke', stylers: [{color: '#f5f1e6'}]},
{
stylers: [{
visibility: 'off',
color: '#17263c',
strokeWeight: 2
}]
},
{
elementType: 'labels',
stylers: [{
visibility: 'on',
color: '#17263c',
strokeWeight: 2
}]
}
], {
name: 'Labels'
});
map.overlayMapTypes.push(labelsMapType);
overlay.setMap(map)
setTimeout(function(){
document.getElementById('map_canvas').firstChild.firstChild.firstChild.firstChild.firstChild.style.zIndex = 102;
}, 2000);
希望这会帮助某人。