谷歌地图 GeoComplete 与 GeoJson

Posted 2023-02-23

【中文标题】谷歌地图 GeoComplete 与 GeoJson

【英文标题】：Google Maps GeoComplete with GeoJson

【发布时间】：2016-05-31 14:20:53

【问题描述】：

我正在努力让 Google 地图向我展示存储在 GeoJSON 对象中的数据。如果我在多边形上使用单击事件，它会第一次起作用。代码如下：

// Get the GeoJSON file from the server
HTTP.get(Meteor.absoluteUrl("/geo.json"), function(err,result) 
    GoogleMaps.maps.fibreMap.instance.data.loadGeoJson("/geo.json");
);

// Add style and colouring to the map
GoogleMaps.maps.fibreMap.instance.data.setStyle(function(feature) 
    // Get the Fibrehood Status
    var status = feature.getProperty('status');
    // Add colour accoring to status
    if (status == "live") 
        opacity = 0.65;
     else if (status == "build") 
        opacity = 0.4;
     else if (status == "register_i") 
        opacity = 0.2;
    
    // Return the correct styling 
    return (
        fillColor: '#ec008c',
        strokeColor: '#ec008c',
        strokeOpacity: 0.35,
        strokeWeight: 0,
        fillOpacity: opacity
    );
);

GoogleMaps.maps.fibreMap.instance.data.addListener('click', function(event) 
    var hood = event.feature.getProperty('name');
    var status = event.feature.getProperty('status');
    console.log(hood + " : " + status);
);

但是，当尝试使用 GeoComplete 在地址上放置图钉时，它不会运行。我知道这应该由某种事件触发，例如地图上的标记或 Dom 元素的变化，但我无法弄清楚。

有没有人知道如何从 DOM 触发事件或将标记放到地图上？我有点菜鸟，非常感谢任何帮助。

谢谢 迈克

【问题讨论】：

geo.json 和 geocomplete 之间有关系吗？我不相信你可以通过谷歌以外的方式制作所说的插件地理定位地址

【参考方案1】：

有人知道如何从 DOM 触发事件或将标记放到地图上吗？

当然，有。 Google Maps JS API 有一个使用map events 和地图标记的详细记录示例。

在本例中，一个标记将落在您使用“点击事件”点击的地图上。

// This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, 'click', function(event) 
    addMarker(event.latLng, map);
  );

  // Add a marker at the center of the map.
  addMarker(bangalore, map);


// Adds a marker to the map.
function addMarker(location, map) 
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  var marker = new google.maps.Marker(
    position: location,
    label: labels[labelIndex++ % labels.length],
    map: map
  );

完整的演示是here。

这里是监听 DOM 事件示例的链接：

https://developers.google.com/maps/documentation/javascript/examples/event-domListener