在谷歌地图apiv3中使用geojson加载每个点的自定义图标

问题描述 投票：0回答：1

我已经使用谷歌地图有一段时间了，并且遇到了kml图层的限制（没有鼠标悬停，只能点击）

所以我想尝试一下数据层（geojson）

我似乎不知道如何更改图标（标记图像）。

我能够将所有标记更改为特定图像，但我希望能够根据我的数据库生成的 feature.property. 来使用 8 个不同图像之一

 map.data.loadGeoJson('http://www.example.com/geojson.php?city_id=017');
     // Set mouseover event for each feature.
      map.data.addListener('mouseover', function(event) {
        $('.map-tooltip').text(event.feature.getProperty('name'));
      });

我的 JSON 文件

{
   "type":"FeatureCollection",
   "features":[
      {
         "type":"Feature",
         "geometry":{
            "type":"Point",
            "coordinates":[
               -117.1405,
               33.551667
            ]
         },
         "icon":"http://maps.google.com/mapfiles/dir_0.png",
         "properties":{
            "name":"017001",
            "heading":null,
            "face":"North"
         }
      },
      {
         "type":"Feature",
         "geometry":{
            "type":"Point",
            "coordinates":[
               -117.123269,
               33.552172
            ]
         },
         "icon":"http://maps.google.com/mapfiles/dir_90.png",
         "properties":{
            "name":"050010",
            "heading":null,
            "face":"East"
         }
      },
      {
         "type":"Feature",
         "geometry":{
            "type":"Point",
            "coordinates":[
               -117.122675,
               33.55155
            ]
         },
         "icon":"http://maps.google.com/mapfiles/dir_60.png",
         "properties":{
            "name":"050011",
            "heading":null,
            "face":"South"
         }
      },
      {
         "type":"Feature",
         "geometry":{
            "type":"Point",
            "coordinates":[
               -117.120978,
               33.551613
            ]
         },
         "icon":"http://maps.google.com/mapfiles/dir_30.png",
         "properties":{
            "name":"050012",
            "heading":null,
            "face":"West"
         }
      },
         {
         "type":"Feature",
         "geometry":{
            "type":"Point",
            "coordinates":[
               -117.118667,
               33.6055
            ]
         },
         "icon":"http://maps.google.com/mapfiles/dir_walk_18.png",
         "properties":{
            "name":"017069",
            "heading":null,
            "face":"SE"
         }
      },
      {
         "type":"Feature",
         "geometry":{
            "type":"Point",
            "coordinates":[
               -117.118667,
               33.6055
            ]
         },
         "icon":"http://maps.google.com/mapfiles/dir_111.png",
         "properties":{
            "name":"017069",
            "heading":null,
            "face":"SW"
         }
      },
      {
         "type":"Feature",
         "geometry":{
            "type":"Point",
            "coordinates":[
               -117.11,
               33.5835
            ]
         },
         "icon":"http://maps.google.com/mapfiles/dir_81.png",
         "properties":{
            "name":"017070",
            "heading":null,
            "face":"NW"
         }
      },
      {
         "type":"Feature",
         "geometry":{
            "type":"Point",
            "coordinates":[
               -117.11,
               33.5835
            ]
         },
         "icon":"http://maps.google.com/mapfiles/dir_42.png",
         "properties":{
            "name":"017070",
            "heading":null,
            "face":"NE"
         }
      }
   ]
}

所以我不知道如何让图标文件工作 TIA 寻求帮助

google-maps-api-3
1个回答
5
投票

要访问 geoJson 中的 

icon
属性（至少使用 dataLayer 方法），您需要将其移动到“属性”对象中。然后你就可以这样做（就像文档中的动态样式示例）

map.data.setStyle(function(feature) {
  var icon=null;
  if (feature.getProperty('icon')) {
    icon = feature.getProperty('icon');
  }
  return /** @type {google.maps.Data.StyleOptions} */({
    icon: icon
  });
});

概念证明小提琴

代码片段：

var map;
var bounds = new google.maps.LatLngBounds();

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  google.maps.event.addListener(map.data, 'addfeature', function(e) {
    // auto center map on markers
    if (e.feature.getGeometry().getType() === 'Point') {
      bounds.extend(e.feature.getGeometry().get());
    }
    map.fitBounds(bounds);
  });
  // Set the icon from the "icon" property in the geoJson
  map.data.setStyle(function(feature) {
    var icon = null;
    if (feature.getProperty('icon')) {
      icon = feature.getProperty('icon');
    }
    return /** @type {google.maps.Data.StyleOptions} */ ({
      icon: icon
    });
  });
  map.data.addGeoJson(geoJson);
}
google.maps.event.addDomListener(window, "load", initialize);

// modified geoJson
var geoJson = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-117.1405,
        33.551667
      ]
    },

    "properties": {
      "name": "017001",
      "heading": null,
      "face": "North",
      "icon": "http://maps.google.com/mapfiles/dir_0.png"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-117.123269,
        33.552172
      ]
    },
    "properties": {
      "name": "050010",
      "heading": null,
      "icon": "http://maps.google.com/mapfiles/dir_90.png",
      "face": "East"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-117.122675,
        33.55155
      ]
    },
    "properties": {
      "icon": "http://maps.google.com/mapfiles/dir_60.png",
      "name": "050011",
      "heading": null,
      "face": "South"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-117.120978,
        33.551613
      ]
    },

    "properties": {
      "icon": "http://maps.google.com/mapfiles/dir_30.png",
      "name": "050012",
      "heading": null,
      "face": "West"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-117.118667,
        33.6055
      ]
    },
    "properties": {
      "icon": "http://maps.google.com/mapfiles/dir_walk_18.png",
      "name": "017069",
      "heading": null,
      "face": "SE"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-117.118667,
        33.6055
      ]
    },
    "properties": {
      "icon": "http://maps.google.com/mapfiles/dir_111.png",
      "name": "017069",
      "heading": null,
      "face": "SW"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-117.11,
        33.5835
      ]
    },
    "properties": {
      "icon": "http://maps.google.com/mapfiles/dir_81.png",
      "name": "017070",
      "heading": null,
      "face": "NW"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-117.11,
        33.5835
      ]
    },
    "properties": {
      "icon": "http://maps.google.com/mapfiles/dir_42.png",
      "name": "017070",
      "heading": null,
      "face": "NE"
    }
  }]
};
html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.