如何使用GoogleMapsJavaScriptAPI3单独填充彩色地图层?
如何分别填充颜色贴图层?我有一个函数,用于根据GeoJSON中存储的值设置多边形的样式。请原谅我对术语的无知。我是JS新手,已经研究这个问题整整一周了,搜索网页,看了几个小时的教程,但无法回答这个具体问题 我的功能代码包含以下初始化和创建映射的步骤:如何使用GoogleMapsJavaScriptAPI3单独填充彩色地图层?,javascript,google-maps,google-maps-api-3,styles,local-variables,Javascript,Google Maps,Google Maps Api 3,Styles,Local Variables,如何分别填充颜色贴图层?我有一个函数,用于根据GeoJSON中存储的值设置多边形的样式。请原谅我对术语的无知。我是JS新手,已经研究这个问题整整一周了,搜索网页,看了几个小时的教程,但无法回答这个具体问题 我的功能代码包含以下初始化和创建映射的步骤: function initialize() { var mapOptions = { zoom: 16, center: new google.maps.LatLng(30.
function initialize() {
var mapOptions = {
zoom: 16,
center: new google.maps.LatLng(30.284, -97.7325),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
},
mapTypeId: MY_MAPTYPE_ID
};
// build the map
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// add colors
stylePolygons();
//fetch map layers
$.getJSON( parkingLot, function( data ) {
loadGeoJSON(data);
});
$.getJSON( building, function( data ) {
loadGeoJSON(data);
});
};
在脚本的后面,我用这个来给建筑上色
// assign colors based on value property of each feature
function stylePolygons () {
map.data.setStyle(function(feature) {
var value = feature.getProperty('value');
var color = colors[value];
return {
fillColor: color,
strokeWeight: 0.5,
fillOpacity: 1
};
});
};
如何单独设置其余图层的样式?内联代码或简单函数会很好,因为层很简单,我不想将值附加到它们的表中
我想我应该使用一个局部变量或一个针对特定对象的函数,并假设有一些简单的代码,例如:
parkingLot.fillColr('red');
或
或
但我在黑暗中拍摄。非常感谢您的建议
谢谢,如果不知道停车场geojson的模式,很难说出来,但让我们想象一下它们是
{
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"color": "red"
},
"geometry": {
"type": "Point",
"coordinates": [-116.9933, 34.0557, 14.3]
}
}, {
"type": "Feature",
"properties": {
"color": "blue"
},
"geometry": {
"type": "Point",
"coordinates": [-147.7822, 61.9128, 38.3]
}
}, {
"type": "Feature",
"properties": {
"color": "green"
},
"geometry": {
"type": "Point",
"coordinates": [-123.105, 38.6473, 1.1]
}
}, {
"type": "Feature",
"properties": {
"color": "purple"
},
"geometry": {
"type": "Point",
"coordinates": [-122.7997, 38.8318, 2.3]
}
}]
}
现在,你还没有说你在哪里存储你的多边形。您正在实例化一个新的google.maps.Data层吗
如果是,则新数据层中的每个要素都是一个对象,可以使用getProperty()
方法和与stylePolygons
非常相似的函数对其进行单独样式设置,迭代每个要素并将其颜色设置为feature.getProperty('color')
的结果
如果您希望一步完成整个系列的设计,那么您只需
parkingLot.setStyle({'color':'red' });
但这是假设parkingLot是google.maps.Data的一个实例。这些层作为GeoJSON存储在我的谷歌硬盘上。我添加了一个带有值的颜色字段。如果能够轻松更改图层的颜色值,那就太好了。谢谢
{
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"color": "red"
},
"geometry": {
"type": "Point",
"coordinates": [-116.9933, 34.0557, 14.3]
}
}, {
"type": "Feature",
"properties": {
"color": "blue"
},
"geometry": {
"type": "Point",
"coordinates": [-147.7822, 61.9128, 38.3]
}
}, {
"type": "Feature",
"properties": {
"color": "green"
},
"geometry": {
"type": "Point",
"coordinates": [-123.105, 38.6473, 1.1]
}
}, {
"type": "Feature",
"properties": {
"color": "purple"
},
"geometry": {
"type": "Point",
"coordinates": [-122.7997, 38.8318, 2.3]
}
}]
}
parkingLot.setStyle({'color':'red' });