向数据图层添加几何 - 如何在添加过程中设置要素样式?

Question

我正在构建一个学校图层。 对于每所学校，我将根据其属性分配不同的图标。

这是我目前的解决方案。 我首先将所有学校插入到数据层中，然后运行forEach函数来更改每个点的图标。 这不是最佳的，因为我正在添加学校，然后立即编辑学校。

// Current solution.  It is WORKING but it is not optimal
schools = (a list of google.maps.Data.Point objects)
for (school in schools) {
schoolLayer.add({
geometry: school,
});
}
schoolLayer.forEach(function(feature) {
schoolLayer.overrideStyle(feature, {
if (some condition) {
icon: ...
} else {
icon: ...
}
}
}

---

最佳解决方案是在添加学校时向学校添加样式，以便之后无需编辑。 像这样：

// The solution I am trying to achieve.  The `StyleOptions` property is made up to represent what I am trying to achieve.  I want to add styles to the school as it is being inserted into the data layer
for (school in schools) {
schoolLayer.add({
geometry: school,
StyleOptions: {
if (some condition) {
icon: ...
} else {
icon: ...
}
}
});
}

上面的代码不起作用。 文档中是否缺少一些允许我实现这一目标的内容？

Answer 1

我建议创建一个google.maps.Data.Feature对象列表而不是google.maps.Data.Point对象。Data.Feature可以包括作为google.maps.Data.Point实例的几何图形、可以是字符串或数字的 id 以及可以放置名称-值对的属性。

https://developers.google.com/maps/documentation/javascript/reference/3/data#Data.Feature

要素中存在属性是一个技巧。您可以为数据图层应用样式函数，该函数读取要素的属性(在本例中为图标(并返回相应的样式。将要素添加到数据图层时，将应用样式函数。

看看下面的代码示例，schoolLayer.setStyle()是最相关的部分

var map;
function initMap() {
var schools = [
new google.maps.Data.Feature({
geometry: new google.maps.Data.Point({lat: 41.384301, lng: 2.173792}),
id: 1,
properties: {
"icon": "http://maps.google.com/mapfiles/kml/paddle/blu-blank.png"
}
}),
new google.maps.Data.Feature({
geometry: new google.maps.Data.Point({lat: 41.384897, lng: 2.176656}),
id: 2,
properties: {
"icon": "http://maps.google.com/mapfiles/kml/paddle/pink-blank.png"
}
}),
new google.maps.Data.Feature({
geometry: new google.maps.Data.Point({lat: 41.386756, lng: 2.175268}),
id: 3,
properties: {
"icon": "https://maps.gstatic.com/mapfiles/place_api/icons/geocode-71.png"
}
})
];
map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: {lat: 41.385064, lng: 2.173403}
});
var schoolLayer = map.data;
schoolLayer.setStyle(function(feature){
return {
icon: feature.getProperty("icon"),
title: "" + feature.getId()
};
});
for (school of schools) {
schoolLayer.add(school);
}
}

#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}

<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap">

你也可以在jsfiddle上找到这个例子：https://jsfiddle.net/xomena/tLsjkowp/

我希望这有帮助！

Answer 2

@xonema - 很好的答案。 只是补充一点，我以这种方式在本地设置属性：

new google.maps.Data.Feature({
geometry: new google.maps.Data.Point(gaugeLatLng),
properties: {
title: gaugeDetail.gaugeId,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 6,
},
}
})