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

Add infowindow and custom icon to Google map using Geojson

本文关键字：自定义 图标 谷歌地图 窗口 Geojson 添加 信息 信息窗 使用      更新时间：2023-09-26

我在Web2py应用程序中有这个简单的Google地图。我想应用一些东西，比如选择功能图标的开关，也可以从json文本设置infoWindow。

有人知道我该怎么做吗?
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;
}

但我不知道怎么做。

对于infowindow，我可以使用这个函数吗?如何显示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;
        });
    }
}

对于图标，你必须使用setStyle-function。

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

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

InfoWindow的功能可能不能使用，因为click-handler中没有标记可用，必须根据所单击的feature

设置InfoWindow的选项。
  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>

相关文章：