半径数据形式JSON内的谷歌地图显示标记

Question

我正在关注this link，这对我有很大帮助，但是当我应用 JSON 数据页面的坐标时没有响应。

在应用 Random Lat Lng 它的工作时，但应用真实的 JSON 数据，它会使浏览器崩溃且无响应！

google.maps.geometry.spherical.computeDistanceBetween 计算距离，函数内部可访问的 JSON 数据在应用 JSON 数据时仍然浏览器无响应。

if (document.getElementById('map2')) {

    var map;
    var m = '';
    var url = '/data';


  // Coordinates to center the map
  var myLatlng = new google.maps.LatLng( 26.2124, 127.6809 );

  // Other options for the map, pretty much selfexplanatory
  var mapOptions = {
    zoom: 13,
    center: myLatlng,
    // mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  // Attach a map to the DOM Element, with the defined settings
  var map = new google.maps.Map(document.getElementById("map2"), mapOptions);
  var marker = new google.maps.Marker({
    map: map,
    position: myLatlng
  });
  var circle = new google.maps.Circle({
    map: map,
    radius: 2500,
    fillColor: '#AA0000',
    fillOpacity: 0.15,
    strokeWeight: 0.9,
    position: myLatlng
  });
  circle.bindTo('center', marker, 'position');

  var circleBounds = circle.getBounds();

    $.ajax({
        url: url,
        type: 'GET',
        dataType: 'json',
        success: function(data) {
            m = data;
            console.log(m.length);
            for (var i = 0; i < m.length; i++) {
                var marker = generateMarkerInCircleRadius(circleBounds, m[i].latitude, m[i].longitude);
                marker.setMap(map);
          }
        }

    });

  function generateMarkerInCircleRadius(boundries, lati, lngi) {
    var marker = new google.maps.Marker();
    marker.setPosition(new google.maps.LatLng(returnLat(lati), returnLng(lngi)));

    while (!isMarkerInRadius(marker, circle)) {
      var
        ne = boundries.getNorthEast(),
        sw = boundries.getSouthWest(),
        // lat = randomFloat(ne.lat(), sw.lat()),
        // lng = randomFloat(ne.lng(), sw.lng());
        lat = returnLat(lati),
        lng = returnLng(lngi);

      marker.setPosition(new google.maps.LatLng(lat, lng));
    }
    return marker;
  }

  function randomFloat(min, max) {
    return Math.random() * (max - min) + min;
  }

  function returnLat(data) {
    return Number(data);
  }
  function returnLng(data) {
    return Number( data );
  }

  function isMarkerInRadius(marker, circle) {
    return google.maps.geometry.spherical.computeDistanceBetween(marker.getPosition(), myLatlng) <= circle.getRadius();
  }
}

<div id="map2" style="height: 500px; width: 100%;"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry&sensor=false" type="text/javascript"></script>

Answer 1

通过途径：

if (document.getElementById('map2')) {

    var map;
    var m = '';
    var url = '/data';


  // Coordinates to center the map
  var myLatlng = new google.maps.LatLng( 26.2124, 127.6809 );

  // Other options for the map, pretty much selfexplanatory
  var mapOptions = {
    zoom: 13,
    center: myLatlng,
    // mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  // Attach a map to the DOM Element, with the defined settings
  var map = new google.maps.Map(document.getElementById("map2"), mapOptions);
  var marker = new google.maps.Marker({
    map: map,
    position: myLatlng
  });
  var circle = new google.maps.Circle({
    map: map,
    radius: 1500,
    fillColor: '#AA0000',
    fillOpacity: 0.15,
    strokeWeight: 0.9,
    position: myLatlng
  });
  circle.bindTo('center', marker, 'position');

  var circleBounds = circle.getBounds();

    $.ajax({
        url: url,
        type: 'GET',
        dataType: 'json',
        success: function(data) {
            m = data;
            console.log(m.length);
            for (var i = 0; i < m.length; i++) {
                var marker = generateMarkerInCircleRadius(circleBounds, m[i].latitude, m[i].longitude);
                // marker.setMap(map);        
          }
        }

    });

  function generateMarkerInCircleRadius(boundries, lati, lngi) {
    var marker = new google.maps.Marker();
    marker.setPosition(new google.maps.LatLng(returnLat(lati), returnLng(lngi)));

    if (google.maps.geometry.spherical.computeDistanceBetween(new google.maps.LatLng(returnLat(lati), returnLng(lngi)), myLatlng) <= circle.getRadius()) {
      // bounds.extend(new google.maps.LatLng(m[i].latitude, m[i].longitude))
        marker.setMap(map);        
      // return marker;
    } else {
        marker.setMap(null);
    }

  }

  function randomFloat(min, max) {
    return Math.random() * (max - min) + min;
  }

  function returnLat(data) {
    return Number(data);
  }
  function returnLng(data) {
    return Number(data);
  }
}