Question

我希望在Google地图中显示超过250.000点，这需要花费很多时间，大部分时间都会崩溃。有更快的方法吗？或者我可以在放大时显示更多标记吗？

这是我的代码：

function initMap() {
  // Create the map.
  var map = new google.maps.Map(document.getElementById('googleMap'), {
    zoom: 9,
    center: {lat: 52.881966667, lng: 11.74306},
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the bandwidth.
  for (var city in citymap) {
    // Add the circle for this city to the map.
      var rssi = citymap[city].rssi;
      var cityCircle = new google.maps.Circle({
      strokeColor: '#ff0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#ff0000',
      fillOpacity: 0.2,
      map: map,
      center: {lat:Number(citymap[city].lat), lng:Number(citymap[city].lng)},
      radius: 100*Math.sqrt(citymap[city].rssi)
      });
  }
}
google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

看看这是否有帮助。

我的基础是我刚给你的链接。

我做了三件事。

在加载数据之前我延迟了1秒。
当客户端缩放（或调整地图大小）时，在上次更改后一秒钟加载数据。仅从数据库中检索地图边界内的位置。
MarkerClusterer聚类标记。对于你的剧本来说，这可能是一个好主意。

我预计这会在地图放大时提供帮助。缩小问题可能仍然存在。让我知道

sql导出文件：http://www.manutechnica.com/stackoverflow/city.sql

data.php

<?php
// Connecting, selecting database
$link = mysql_connect('localhost', 'root', '') or die('Could not connect');
mysql_select_db('stackoverflow') or die('Could not select database');
mysql_set_charset('utf8',$link);

// if a boundaries range is given
if ($_GET['north'] && $_GET['east'] && $_GET['south'] && $_GET['west']) {
  $query = 'SELECT id, latitude as lat, longitude as lng, name 
  FROM city
  WHERE (latitude between ' . (float) $_GET['south'] .' AND ' . (float) $_GET['north'] .')
    AND (longitude between ' . (float) $_GET['west'] .' AND ' . (float) $_GET['east'] .')
  ';
}
else {
  $query = 'SELECT id, latitude as lat, longitude as lng, name FROM city';
}
$res = mysql_query($query);

$my_array = array();
while ($row = mysql_fetch_assoc($res)) {
  array_push ($my_array, $row);
}

// print the result
echo json_encode($my_array);
// Free resultset
mysql_free_result($res);
// Closing connection
mysql_close($link);
?>

的index.php

<style>
#map {
  height: 400px;
}
#display {
  max-height: 400px;
  overflow-y: auto;
  cursor: pointer;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
  var mc;
  var map;
  var markers = [];
  var markerData = [];
  var t;  // timer

  function initialize() {

    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: new google.maps.LatLng(51, 4),  // Belgium
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

     // Read the locations from database, with an Ajax call
    clearTimeout(t);
    t = setTimeout(function() {
      getData(getDataCallback, true);
    }, 1000);

    function getDataCallback(data) {
      markerData = data;
      markers = [];  // remove the previous markers
      for (var i in data) {
        var marker = new google.maps.Marker({
          map: map,
          position: new google.maps.LatLng(data[i].lat, data[i].lng),
          title: data[i].name
        });
        markers.push(marker);
      }

      // now cluster the markers
      var mcOptions = {}; //{gridSize: 50, maxZoom: 15};
      mc = new MarkerClusterer(map, markers, mcOptions);
      google.maps.event.addListener(map, 'bounds_changed', function() {
        // we will put a timer on this.  So the data is only retreived after the client stops panning/zooming for a second
        clearTimeout(t);
        t = setTimeout(function() {
          getData(getDataCallback, true);
        }, 1000);
      });
    }

  }

  // Read the locations from database, with an Ajax call
  // callback is a function that will be executed when Ajax returns with data from the server
  function getData(callback, ready) {
      var data = {};
      if (ready) {
        data = {
          north: map.getBounds().getNorthEast().lat,
          east: map.getBounds().getNorthEast().lng,
          south: map.getBounds().getSouthWest().lat,
          west: map.getBounds().getSouthWest().lng
        };
      }
      $.ajax({
        url: 'data.php',
        dataType: 'json',
        data: data,
        success: function(data) {
          callback(data);
        }
      });
  }

  function zoomTo(index) {
    map.setZoom(15);
    map.setCenter(markers[index].getPosition());
  }

  google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map"></div>
<ul id="display"></ul>

谷歌地图与巨大的JSON阵列

1 个答案: