GeoJSON点名称&使用Google Map API V3时不会显示说明 [英] GeoJSON Point name & description not displayed when using Google Map API V3

问题描述

我开始使用Google Map Javascript API V3，并希望使用GeoJSON在地图上显示标记。我的GeoJSON如下：

I am starting to use the Google Map Javascript API V3 and wish to display markers on a map, using GeoJSON. My GeoJSON is as follows:

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [153.236112, -27.779627]
            },
            "properties": {
                "name": "[153.236112, -27.779627]",
                "description": "Timestamp: 16:37:16.293"
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [153.230447, -27.777501]
            },
            "properties": {
                "name": "[153.230447, -27.777501]",
                "description": "Timestamp: 16:37:26.298"
            }
        }
    ]
}

以及我的JavaScript代码来加载GeoJSON：

And my JavaScript code to load the GeoJSON:

var map;
var marker;

function initialize() {
    // Create a simple map.
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 14,
        center: ${lastPosition}
    });

    // Load the associated GeoJSON
    var url = 'fieldDataGeoJSON';
    url += '?deviceId=' + deviceId + '&fieldId=' + fieldId;
    map.data.loadGeoJson(url);
}
google.maps.event.addDomListener(window, 'load', initialize);

注意：URLfieldDataGeoJSON ..返回GeoJSON，你可能已经想通了。

Note: the URL "fieldDataGeoJSON.." returns the GeoJSON, as you might have already figured out.

效果很好：地图上显示标记，位置良好。但GeoJSON中存在的名称和描述字段没有链接到标记，这意味着当我点击标记时它们不会显示。

This works well: the markers are shown on the map, at the good location. But the fields "name" and "description" present in the GeoJSON are not linked to the markers, meaning that they are not displayed when I click on the marker.

我想第一个问题是：它应该被支持吗？。如果不是，这是否意味着我必须解析GeoJSON以添加名称和描述？你有任何提示如何做到这一点？

I guess that the first question would be: "Is it supposed to be supported?". If not, does it mean that I have to parse the GeoJSON to add the names and descriptions? Do you have any hints on how to achieve this?

预先感谢您的帮助！

Thank you in advance for your help!

推荐答案

正常Google Maps Javascript API v3 事件监听器正常工作，正常工作 infowindows 。

Normal Google Maps Javascript API v3 event listeners work, as do normal infowindows.

var map;
var infowindow = new google.maps.InfoWindow();

function initialize() {
    // Create a simple map.
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 14,
        center: new google.maps.LatLng(-27.779627,153.236112)
    });
    google.maps.event.addListener(map, 'click', function() {
      infowindow.close();
    });

    // Load the associated GeoJSON
    var url = 'http://www.geocodezip.com/fieldDataGeoJSON.txt';
    map.data.loadGeoJson(url);

  // Set event listener for each feature.
  map.data.addListener('click', function(event) {
     infowindow.setContent(event.feature.getProperty('name')+"<br>"+event.feature.getProperty('description'));
     infowindow.setPosition(event.latLng);
     infowindow.setOptions({pixelOffset: new google.maps.Size(0,-34)});
     infowindow.open(map);
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

工作例子

这篇关于GeoJSON点名称&使用Google Map API V3时不会显示说明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！