使用 loadGeoJson 加载点数据时如何访问 lng/lat?

How can I get access to lng/lat when I load point data with loadGeoJson?

我正在使用 Google Map loadGeoJson 加载 n 数量的位置数据,除了数据本身不是很好之外,一切正常。通常 gps 坐标会在相同位置放置一个标记,这会破坏 Markerclusterer。作为一项实验,我决定为每个标记添加一点抖动,这不会对位置产生太大影响,但允许 markerclusterer 执行此操作。

问题是我无法访问 gps 数据,也不知道如何访问,我检查了谷歌 API 文档,但没有成功。

如何访问 gps 数据并在将其设置为标记之前对其进行更改?

部分代码

      map.data.loadGeoJson('mapdata.json, null, function (features) {

        var bounds = new google.maps.LatLngBounds();
        markers = features.map(function (feature) {

          var markerJitter = feature.getGeometry().get(0); //tried to access data here
          var test = markerJitter.lat; this fails too as [[scope]] is in place

          var infoWin = new google.maps.InfoWindow();
          var marker = new google.maps.Marker({
            position: feature.getGeometry().get(0),   //jitter should be present here
            title: feature.getProperty("address")
          });

          bounds.extend(marker.position);

          google.maps.event.addListener(marker, 'click', function (evt) {
            closeOtherInfo();
            infoWin.setContent('<div id="content">some content</div>');
            infoWin.open(map, marker);
            infoWindowObj[0] = infoWin;
          })
          return marker;
        }); 

        .... //code continues and works

您正在访问包含坐标的 google.maps.LatLng 对象(即 markerJitter)。

它没有 .lat 属性,它有 .lat() 函数。

我不确定你的评论 this fails too as [[scope]] is in place 是什么意思。

这是一个函数。您的代码将 test 设置为等于一个函数,这可能不是您想要做的。

proof of concept fiddle

代码片段:

function initialize() {
  // Create a simple map.
  features = [];
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 10,
    center: {
      lat: 45.495403,
      lng: -73.563032
    }
  });
  google.maps.event.addListener(map, 'click', function() {
    infowidow.close();
  });
  // process the loaded GeoJSON data.
  // google.maps.event.addListener(map.data, 'addfeature', // );
  var features = map.data.addGeoJson(data);
  map.data.setMap(null);
  var bounds = new google.maps.LatLngBounds();
  markers = features.map(function(feature) {

    var markerJitter = feature.getGeometry().get(0); //tried to access data here
    console.log(markerJitter.toUrlValue(6));
    var test = markerJitter.lat; // this fails too as [[scope]] is in place
    console.log("markerJitter lat=" + markerJitter.lat() + " lng=" + markerJitter.lng());
    var infoWin = new google.maps.InfoWindow();
    var marker = new google.maps.Marker({
      position: feature.getGeometry().get(0), //jitter should be present here
      title: feature.getProperty("address"),
      map: map
    });

    bounds.extend(marker.position);

    google.maps.event.addListener(marker, 'click', function(evt) {
      infoWin.setContent('<div id="content">some content<br>' + this.getTitle() + '</div>');
      infoWin.open(map, marker);
      infoWindowObj[0] = infoWin;
    })
    return marker;
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
var data = {
  "type": "FeatureCollection",
  "features":

    [

      {
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [-73.563032, 45.495403]
        },
        "properties": {
          "prop0": "value0",
          "address": "45.495403,-73.563032"
        }
      },

      {
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [-73.549762, 45.559673]
        },
        "properties": {
          "prop0": "value0",
          "address": "45.559673,-73.549762"
        }
      }
    ]

};
html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px;
  width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map-canvas"></div>