Google Maps API 3从当前位置加载来自MySQL的标记

时间:2013-09-04 07:56:11

标签: php javascript ajax google-maps-api-3

我试图用google maps api创建一个地图,它显示了MySQL数据库中的很多标记。我在Google Maps API教程(https://developers.google.com/maps/articles/phpsqlajax_v3?hl=de)中编写了几乎所有内容。

我的问题:

我不想一次加载所有标记,而只想加载当前视图范围之间的标记。

为此我的" phpsqlajax_genxml.php"获取当前视图的4个边作为GET变量。这很好,但我不知道如何处理javascript-part。

我的第一次尝试是插入一个处理程序,当边界发生变化时更新地图:

google.maps.event.addListener(map, 'bounds_changed', function() {
  var bounds = map.getBounds();

  var swPoint = bounds.getSouthWest();
  var nePoint = bounds.getNorthEast();

  var swLat = swPoint.lat();
  var swLng = swPoint.lng();
  var neLat = nePoint.lat();
  var neLng = nePoint.lng();

  var qs = '&swLat=' + swLat + '&swLng=' + swLng + '&neLat=' + neLat + '&neLng=' + neLng;
  downloadUrl("./includes/phpsqlajax_genxml.php?sess=<?php print session_id(); 
                  ?>"+qs,function(data){

      var xml = data.responseXML;
      var markers = xml.documentElement.getElementsByTagName("marker");
      for (var i = 0; i < markers.length; i++) {
        var name = markers[i].getAttribute("name");
        var address = markers[i].getAttribute("address");
        var type = markers[i].getAttribute("type");
        var point = new google.maps.LatLng(
            parseFloat(markers[i].getAttribute("lat")),
            parseFloat(markers[i].getAttribute("lng")));
        var html = "<b>" + name + "</b> <br/>" + address;
        var icon = customIcons[type] || {};
        var marker = new google.maps.Marker({
          map: map,
          position: point,
          icon: icon.icon,
          shadow: icon.shadow
        });
        bindInfoWindow(marker, map, infoWindow, html);
      }
  });

但是当我在地图上滚动时,这会每隔几毫秒更新一次地图。我怎么才能每隔一秒更新一次?

主要问题是如何仅将新缓存插入到地图中并删除那些不在我视图中的缓存。我不知道该怎么做。

到目前为止,&#34; DownloadUrl&#34; -function每隔几毫秒下载该区域的每个缓存,并下载那些我已下载的缓存,因此您可能会看到每个标记一千次。

是的,有人可以帮帮我吗? :)

1 个答案:

答案 0 :(得分:2)

可能有不同的方法,例如

  1. 始终请求给定边界的所有标记并删除所有先前添加的标记

  2. 仅请求您尚未获得的给定边界的标记。因此,您必须收集已在视图中绘制的标记(例如ID)并将此列表作为参数传递给PHP脚本,以便此脚本可以使用该列表来过滤查询中的标记(注意:您最好通过POST发送数据,否则您将达到非常快的URL长度限制

  3. 与删除不在视图中的标记相关:
    当你真的必须删除视图之外的标记时,我没有比迭代所有标记并删除(将map-property设置为null)不在地图范围内的标记更好的想法(可以通过LatLngBounds.contains()

    听众的另一个问题:你最好听一下idle - 地图事件