Google地图V3：更新标记 [英] Google Maps V3: Updating Markers

问题描述

我在使用Google地图api v3时遇到了一些问题。我设法创建了一个地图，用户在拖动地图时显示新的标记。但是，它不会删除以前的标记。我已阅读了许多教程和主题（尤其是这一篇： Google地图V3：定期更新标记

这是我的主页：

 <！DOCTYPE html> 
< html> 
< head> 
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/> 
< meta http-equiv =content-typecontent =text / html; charset = UTF-8/> 
< title>开发API谷歌地图< / title> 
< style type =text / css> 
 html {
 height：100％; 
} 
 body {
 height：100％; 
 margin：0px; 
 padding：0px; 
} 
 #map_canvas {
 height：100％; 
} 
< / style> 
< script type =text / javascriptsrc =https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js>< / script> 
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=false>< / script> 
< script type =text / javascript> 
 
函数createXmlHttpRequest（）{
尝试{
 if（typeof ActiveXObject！='undefined'）{
 return new ActiveXObject（'Microsoft.XMLHTTP'）; 
} else if（window [XMLHttpRequest]）{
 return new XMLHttpRequest（）; 
} 
} catch（e）{
 changeStatus（e）; 
} 
返回null; 
}; 
 
函数downloadUrl（url，callback）{
 var status = -1; 
 var request = createXmlHttpRequest（）; 
 if（！request）{
 return false; 
 
 
 request.onreadystatechange = function（）{
 if（request.readyState == 4）{
 try {
 status = request.status ; 
} catch（e）{
} 
 if（status == 200）{
 callback（request.responseText，request.status）; 
 request.onreadystatechange = function（）{}; 
} 
} 
} 
 request.open（'GET'，url，true）; 
尝试{
 request.send（null）; 
} catch（e）{
 changeStatus（e）; 
} 
}; 
 
函数xmlParse（str）{
 if（typeof ActiveXObject！='undefined'&& typeof GetObject！='undefined'）{
 var doc = new ActiveXObject 'Microsoft.XMLDOM'）; 
 doc.loadXML（str）; 
 return doc; 
} 
 
 if（typeof DOMParser！='undefined'）{
 return（new DOMParser（））。parseFromString（str，'text / xml'）; 
} 
 
 return createElement（'div'，null）; 
} 
 
 var map; 
 
函数initialize（）{
 var latlng = new google.maps.LatLng（46.7，2.5）; 
 var myOptions = {
 zoom：6，
 center：latlng，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}; 
 map = new google.maps.Map（document.getElementById（'map_canvas'），myOptions）; 
 
 downloadUrl（getPoi2.php，function（data）{
 
 var xml = xmlParse（data）; 
 var markers = xml.documentElement.getElementsByTagName（ marker）; 
 for（var i = 0; i  createMarker（parseFloat（markers [i] .getAttribute（lat）），parseFloat（markers [i] .getAttribute（lng）），markers [i] .getAttribute（'titre'））; 
} 
}）; 
 $ b $ * Ici，on ajoute l'écouteurd'événementsuiteàun glisser /déposer* / 
 google.maps.event.addListener（map，'dragend'，function（）{ 
 var bds = map.getBounds（）; 
 var South_Lat = bds.getSouthWest（）。lat（）; 
 var South_Lng = bds.getSouthWest（）。lng（）; 
 var North_Lat = bds.getNorthEast（）。lat（）; 
 var North_Lng = bds.getNorthEast（）。lng（）; 
 downloadUrl（getPoi.php？maxlat =+ North_Lat +& minlat =+ South_Lat +& minlong =+ South_Lng +& maxlong =+ North_Lng，函数（data）{
 var xml = xmlParse（data）; 
 var markers = xml.documentElement。 getElementsByTagName（marker）; 
 
 for（var i = 0; i< markers.length; i ++）{
 createMarker（parseFloat（markers [i] .getAttribute（lat ）），parseFloat（markers [i] .getAttribute（lng）），markers [i] .getAttribute（'titre'））; 
} 
}）; 
 }）; 
 
 
函数createMarker（lat，lng，titre）{
 var latlng = new google.maps.LatLng（lat，lng）; 
 var marker = new google.maps.Marker（{
 position：latlng，
 map：map，
 title：titre 
}）; 
 
} 
 
< / script> 
< / head> 
< body onload =initialize（）> 
< div id =map_canvasstyle =width：100％; height：100％;>< / div> 
 
< / body> 
< / html> 
  

还有我的getPoin.php：

 <？php 
 $ user =root; 
 $ password =; 
 $ host =localhost; 
 $ bdd =citiesinvaders; 
 mysql_connect（$ host，$ user，$ password）; 
 mysql_select_db（$ bdd）或死（错误的连接àla base 
 dedonnées）; 
 $ sql =选择*从城市desc限制1的位置顺序; 
 $ res = mysql_query（$ sql）或者死（mysql_error（））; 
 $ dom = new DomDocument（'1.0'，'utf-8'）; 
 $ node = $ dom-> createElement（markers）; 
 $ parnode = $ dom-> appendChild（$ node）; 
 while（$ result = mysql_fetch_array（$ res））{
 $ node = $ dom-> createElement（marker）; 
 $ newnode = $ parnode-> appendChild（$ node）; 
 $ newnode-> setAttribute（city，$ result [city]）; 
 $ newnode-> setAttribute（lat，$ result [latitude]）; 
 $ newnode-> setAttribute（lng，$ result [longitude]）; 
} 
 $ xmlfile = $ dom-> saveXML（）; 
 echo $ xmlfile; 
？> 
  

感谢您的帮助！

解决方案

跟踪创建的google.maps.Marker对象，并在创建新对象之前删除它们。

  var map; 
 var gmarkers = []; 
 
 
 / * Ici，on ajoute l'écouteurd'événementsuiteàun glisser /déposer* / 
 google.maps.event.addListener（map，'dragend'， function（）{
 var bds = map.getBounds（）; 
 var South_Lat = bds.getSouthWest（）。lat（）; 
 var South_Lng = bds.getSouthWest（）。lng（） ; 
 var North_Lat = bds.getNorthEast（）。lat（）; 
 var North_Lng = bds.getNorthEast（）。lng（）; 
 downloadUrl（getPoi.php？maxlat =+功能（数据）{
 var xml = xmlParse（data）; 
 var markers =+++; " North_Lat +& xml.documentElement.getElementsByTagName（marker）; 
 
 //隐藏并删除现有的标记
 for（var i = 0; i< gmarkers.length; i ++）{$ b $ （var i = 0; i< markers.length; i ++）{b gmarkers [i] .setMap（null）; 
} 
 gmarkers = []; 
 
 { 
 createMarker（parseFloat（markers [i] .getAttribute（lat）），parseFloat（markers [i] .getAttribute（l ng）），markers [i] .getAttribute（'titre'））; 
} 
}）; 
}）; 
 
函数createMarker（lat，lng，titre）{
 var latlng = new google.maps.LatLng（lat，lng）; 
 var marker = new google.maps.Marker（{
 position：latlng，
 map：map，
 title：titre 
}）; 
 //保存对已创建标记的引用，以便将其删除
 gmarkers.push（marker）; 
} 
  

I have some issues with Google maps api v3. I managed to create a map where new markers are displayed when the user drag the map. However, it do not delete the past markers. I have read many tutorials and thread (especially this one: Google Maps V3: Updating Markers Periodically) without success.

Here is my main page:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Développez avec les API Google Maps</title>
<style type="text/css">
 html {
  height: 100%;
 }
 body {
  height: 100%;
  margin: 0px;
  padding: 0px;
 }
 #map_canvas {
  height: 100%;
 }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

function createXmlHttpRequest() {
    try {
        if (typeof ActiveXObject != 'undefined') {
            return new ActiveXObject('Microsoft.XMLHTTP');
        } else if (window["XMLHttpRequest"]) {
            return new XMLHttpRequest();
        }
    } catch (e) {
        changeStatus(e);
    }
    return null;
};

function downloadUrl(url, callback) {
    var status = -1;
    var request = createXmlHttpRequest();
    if (!request) {
        return false;
    }

    request.onreadystatechange = function() {
        if (request.readyState == 4) {
            try {
                status = request.status;
            } catch (e) {
            }
            if (status == 200) {
                callback(request.responseText, request.status);
                request.onreadystatechange = function() {};
            }
        }
    }
    request.open('GET', url, true);
    try {
        request.send(null);
    } catch (e) {
        changeStatus(e);
    }
};

function xmlParse(str) {
  if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
    var doc = new ActiveXObject('Microsoft.XMLDOM');
    doc.loadXML(str);
    return doc;
  }

  if (typeof DOMParser != 'undefined') { 
    return (new DOMParser()).parseFromString(str, 'text/xml');
  }

  return createElement('div', null);
}

 var map;

 function initialize() {
  var latlng = new google.maps.LatLng(46.7, 2.5);
  var myOptions = {
   zoom: 6,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

  downloadUrl("getPoi2.php", function(data) { 

   var xml = xmlParse(data);
   var markers = xml.documentElement.getElementsByTagName("marker");
   for (var i = 0; i < markers.length; i++) {
    createMarker(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")), markers[i].getAttribute('titre'));
   }
  });

        /* Ici, on ajoute l'écouteur d'événement suite à un glisser / déposer  */ 
        google.maps.event.addListener(map, 'dragend', function() {
        var bds = map.getBounds();
        var South_Lat = bds.getSouthWest().lat();
        var South_Lng = bds.getSouthWest().lng();
        var North_Lat = bds.getNorthEast().lat();
        var North_Lng = bds.getNorthEast().lng();
            downloadUrl("getPoi.php?maxlat="+North_Lat+"&minlat="+South_Lat+"&minlong="+South_Lng+"&maxlong="+North_Lng, function(data) { 
            var xml = xmlParse(data);
            var markers = xml.documentElement.getElementsByTagName("marker");

            for (var i = 0; i < markers.length; i++) {
                createMarker(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")), markers[i].getAttribute('titre'));
            }
            });
        });
 }

 function createMarker(lat, lng, titre){
  var latlng = new google.maps.LatLng(lat, lng);
  var marker = new google.maps.Marker({
   position: latlng,
   map: map,
   title: titre
  });

 }

</script>
</head>
<body onload="initialize()">
 <div id="map_canvas" style="width: 100%; height: 100%;"></div>

</body>
</html>

And there is my getPoin.php:

<?php
$user = "root";
$password = "";
$host = "localhost";
$bdd = "citiesinvaders";
mysql_connect($host,$user,$password);
mysql_select_db($bdd) or die("erreur de connexion à la base
de données");
$sql = "SELECT * FROM location order by city desc limit 1";
$res = mysql_query($sql) or die(mysql_error());
$dom = new DomDocument('1.0', 'utf-8');
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);
while ($result = mysql_fetch_array($res)){
$node = $dom->createElement("marker");
$newnode = $parnode->appendChild($node);
$newnode->setAttribute("city", $result["city"]);
$newnode->setAttribute("lat", $result["latitude"]);
$newnode->setAttribute("lng", $result["longitude"]);
}
$xmlfile = $dom->saveXML();
echo $xmlfile;
?>

Thank you for your help!

解决方案

Keep track of the google.maps.Marker objects created, delete them before creating new ones.

var map;
var gmarkers = [];


/* Ici, on ajoute l'écouteur d'événement suite à un glisser / déposer  */ 
google.maps.event.addListener(map, 'dragend', function() {
  var bds = map.getBounds();
  var South_Lat = bds.getSouthWest().lat();
  var South_Lng = bds.getSouthWest().lng();
  var North_Lat = bds.getNorthEast().lat();
  var North_Lng = bds.getNorthEast().lng();
  downloadUrl("getPoi.php?maxlat="+North_Lat+"&minlat="+South_Lat+"&minlong="+South_Lng+"&maxlong="+North_Lng, function(data) { 
    var xml = xmlParse(data);
    var markers = xml.documentElement.getElementsByTagName("marker");

    // hide and delete the existing markers
    for (var i=0; i<gmarkers.length; i++) {
      gmarkers[i].setMap(null);
    }
    gmarkers = [];

    for (var i = 0; i < markers.length; i++) {
      createMarker(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")), markers[i].getAttribute('titre'));
    }
  });
});

function createMarker(lat, lng, titre){
  var latlng = new google.maps.LatLng(lat, lng);
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: titre
  });
  // keep a reference to created markers so you can remove them 
  gmarkers.push(marker);
}

这篇关于Google地图V3：更新标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！