使用 Geojson 将信息窗口和自定义图标添加到 Google 地图

Question

我在 Web2py 应用程序中有这个简单的 Google 地图。我想应用类似开关的功能来选择功能图标并从 json 文本设置信息窗口。

有人知道我该怎么做吗？

var map;

function initMap() {
    map = new google.maps.Map(document.getElementById("events_map"), {
        center: {lat: 45.070309, lng: 7.686580999999933},
        zoom: 13,
        mapTypeControl: false
    });

    var largeInfowindow = new google.maps.InfoWindow();

    google.maps.event.addListener(map, 'idle', function() {
        var ne = map.getBounds().getNorthEast();
        var north = ne.lat();
        var east = ne.lng();
        var sw = map.getBounds().getSouthWest();
        var south = sw.lat();
        var west = sw.lng();
        var queryString = '?east=' + east + '&west=' + west + '&south=' + south + '&north=' + north + '&zoom=8'
        map.data.loadGeoJson('{{=URL('f_ajax', 'get_locations_g')}}' + queryString);
    });
}

json data has a category field that can have 1, 2, 3, or 4 as value.
So with a switch I would like to set the icon in this way:
var icon;
switch (feature.properties.category) {
    case '1':
        icon = greenIcon;
        break;
    case '2':
        icon = bluIcon;
        break;
    case '3':
        icon = redIcon;
        break;
    case '4':
        icon = blackIcon;
        break;
}

但是我不知道怎么办。

对于信息窗口，我可以使用这个功能吗？如何显示 json 字段 'description'？

谢谢。

function populateInfoWindow(marker, infowindow) {
    // Check to make sure the infowindow is not already opened on this marker.
    if (infowindow.marker != marker) {
        infowindow.marker = marker;
        infowindow.setContent("<div><a href='" + marker.link + "'>" + marker.title + '</a></div>');
        infowindow.open(map, marker);
        // Make sure the marker property is cleared if the infowindow is closed.
        infowindow.addListener('closeclick', function() {
            infowindow.marker = null;
        });
    }
}

Answer 1

对于图标，您必须使用 setStyle 函数。

带图标的对象应该是这里最简单的方法

  map.data.setStyle(function(feature) {
    return {
      icon:({1:greenIcon,
             2:redIcon,
             3:blueIcon,
             4:blackIcon})[feature.getProperty('category')]
    };
  });

可能无法使用信息窗口的功能，因为点击处理程序中没有可用的标记，您必须根据点击设置信息窗口的选项feature

  map.data.addListener('click', function(event) {
    largeInfowindow.setOptions({
      map     : map,
      position: event.feature.getGeometry().get(),
      content : '<strong>'+event.feature.getProperty('description')+'</strong>'
    })
  });

演示：

function initMap() {
 
  var greenIcon       = 'http://maps.gstatic.com/mapfiles/markers2/icon_green.png',
      redIcon         = 'http://maps.gstatic.com/mapfiles/markers2/marker.png',
      blueIcon        = 'http://maps.gstatic.com/mapfiles/markers2/boost-marker-mapview.png',
      blackIcon       = 'http://maps.gstatic.com/mapfiles/markers2/drag_cross_67_16.png',
     
      map             = new google.maps.Map(document.getElementById('map'), {
                          zoom: 4,
                          center: {lat:52.41, lng: 9.74}
                        }),
      largeInfowindow = new google.maps.InfoWindow({pixelOffset:new google.maps.Size(0,-30)});
  
  
  map.data.setStyle(function(feature) {
    return {
      icon:({1:greenIcon,
             2:redIcon,
             3:blueIcon,
             4:blackIcon})[feature.getProperty('category')]
    };
  });
  
  map.data.addListener('click', function(event) {
    largeInfowindow.setOptions({
      map     : map,
      position: event.feature.getGeometry().get(),
      content : '<strong>'+event.feature.getProperty('description')+'</strong>'
    })
  });

  map.data.addGeoJson(json);

}
var json={
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {category:1,description:'Berlin'},
      "geometry": {
        "type": "Point",
        "coordinates": [
          13.392333984375,
          52.53627304145948
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {category:2,description:'Hamburg'},
      "geometry": {
        "type": "Point",
        "coordinates": [
          10.008544921875,
          53.57293832648609
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {category:3,description:'Cologne'},
      "geometry": {
        "type": "Point",
        "coordinates": [
          6.954345703125,
          50.951506094481545
        ]
      }
    }
  ]
};

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

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

使用 Geojson 将信息窗口和自定义图标添加到 Google 地图

Add infowindow and custom icon to Google map using Geojson

javascript

web2py

geojson

google-maps-api-3

演示：