Radius数据表单JSON内的Google Map Show Marker [英] Google Map Show Marker inside Radius data form JSON

问题描述

我正在关注此链接很有帮助，但是当我在不响应的情况下应用JSON数据页面中的坐标时。

I'm Following this link which help a lot but while i'm applying coordinates form JSON data page in not responding.

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

While applying Random Lat Lng its work but apply real JSON data it makes browser Crash and unresponsive!

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

google.maps.geometry.spherical.computeDistanceBetween calculate distance, JSON data accessible inside the function still the browser get unresponsive while JSON data is being Applied.

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>

推荐答案

通过以下方式实现：

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);
  }
}

这篇关于Radius数据表单JSON内的Google Map Show Marker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！