javascript 来自带有 Google 地图的 geoJson 文件的点的自定义标记
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24433084/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Custom markers for points from a geoJson file with Google Maps
提问by doubleplusgood
I'm using GeoJSON as a data source for Google Maps. I'm using v3 of the API to create a data layer as follows:
我使用 GeoJSON 作为 Google 地图的数据源。我正在使用 API 的 v3 创建一个数据层，如下所示：
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var map;
function initialize() {
//Initialise the map
var myLatLng = new google.maps.LatLng(53.231472,-0.539783);
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 17,
center: myLatLng,
scrollwheel: false,
panControl: false,
zoomControl: false,
scaleControl: true,
disableDefaultUI: true
});
//Initialise base folder for icons
var iconBase = '/static/images/icons/';
//Load the JSON to show places
map.data.loadGeoJson('/api/geo');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas"></div>
The source of my GeoJSON data is as follows:
我的 GeoJSON 数据来源如下：
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"icon": "/static/images/icons/map-marker-do.png",
"coordinates": [
-0.53743,
53.23437
]
},
"properties": {
"name": "Cathedral",
"description": "One of Europea?s finest Gothic buildings, once the tallest building in the world that dominates Lincoln's skyline.",
"icon": "/static/images/icons/map-marker-do.png"
}
}
]
}
What I'm trying to do is make the marker icon on the map come from the "icon" property in the JSON, but cannot figure out how to get the data to change the default marker. Can anyone offer any advice? Thanks.
我想要做的是使地图上的标记图标来自 JSON 中的“图标”属性，但无法弄清楚如何获取数据以更改默认标记。任何人都可以提供任何建议吗？谢谢。
回答by Dr.Molle
Use a styling-function(styling-functions enable you to apply styles based on a specific feature)
使用样式功能（样式功能使您能够根据特定功能应用样式）
map.data.setStyle(function(feature) {
return {icon:feature.getProperty('icon')};
});
