使用Google地图的geoJson文件中的点的自定义标记 [英] Custom markers for points from a geoJson file with Google Maps

问题描述

我将GeoJSON用作Google地图的数据源。我使用API​​的v3创建数据层，如下所示：

 < script src =https：// maps.googleapis.com/maps/api/js?v=3.exp\"></script> 
< script> 
 var map; 
函数initialize（）{
 
 //初始化地图
 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 
}）; 
 
 //初始化图标的基础文件夹
 var iconBase ='/ static / images / icons /'; 
 
 //载入JSON以显示地点
 map.data.loadGeoJson（'/ api / geo'）; 
 
} 
 
 google.maps.event.addDomListener（window，'load'，initialize）; 
< / script> 
 
< div id =map-canvas>< / div> 
  

我的GeoJSON数据的来源如下所示：

  {
type：FeatureCollection，
features：[
 {
type：Feature ，
geometry：{
type：Point，
icon：/static/images/icons/map-marker-do.png，
坐标：[
 -0.53743，
 53.23437 
] 
}，
属性：{
name：Cathedral ，
description：欧洲最好的哥特式建筑之一，曾经是世界上最高的建筑，主宰着林肯的天际线。，
icon：/ static / images / icons / map-marker-do.png
} 
} 
] 
} 
  

我试图做的是让地图上的标记图标来自JSON中的图标属性，但无法弄清楚如何获取数据以更改默认标记。任何人都可以提供建议吗？使用样式函数（样式函数使您能够根据特定的要素应用样式）

>

  map.data.setStyle（function（feature）{
 return {icon：feature.getProperty（'icon'）}; 
}）; 
  

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:

<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:

{
  "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 Europe’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.

解决方案

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')};
  });

这篇关于使用Google地图的geoJson文件中的点的自定义标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！