douzhuo8871 2014-08-05 09:35
浏览 57
已采纳

infowindow的Google Maps V3 API链接

I'm working on google maps API v3 (with php and mysql) and I'm searching for a solution to open an infowindow from a link.

Explanation:

I create a google maps with some marker (customer) and I create a list in an another loop directly from my database and I wish to have the possibility to click on the name of my customer to open the infowindow on map.

Thanks to @MrUpsidown I found this code and adapt it, but it doesn't work.

customer page:

<div>
    <? include('phpsqlajax_map_v5.php');?>
</div>
<div>
    <?
        $reponseENT = $bdd->query('
        SELECT *
        FROM client
        WHERE adresse !=""
        AND archive = "FAUX"
        ');
        while($repE = $reponseENT->fetchObject())
            {
            ?>  
                <p><a><? echo $repE->Nom." ".$repE->departement;?></a></p>
            <?
            }
    ?>
</div>

Here myphpsqlajax_map_v5.php (customized name for test)

<script type="text/javascript">
//<![CDATA[
var markers = [];


function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(46.70, 2.00),
    zoom: 6,
    mapTypeId: 'roadmap'
  });
    var marker, i;

    var infoWindow = new google.maps.InfoWindow;

  // Change this depending on the name of your PHP file
    downloadUrl("gen_map_xml2.php",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 nument = markers[i].getAttribute("nument");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html = "<b><a href='reporting_client.php?client=" + nument + "'>" + name +"</a></b><br/>" + address;
      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon
      });
      bindInfoWindow(marker, map, infoWindow, html);
    }
  });
}

function bindInfoWindow(marker, i,map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function(marker, i) {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  } 
    (marker, i));

        // Push the marker to the 'markers' array
        markers.push(marker);
    }

}
google.maps.event.addDomListener(window, 'load', initialize);

// The function to trigger the marker click, 'id' is the reference index to the 'markers' array.
function myClick(id){
    google.maps.event.trigger(markers[id], 'click');
});
}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function doNothing() {}

//]]>
</script>                       


<body onload="load()">
<div id="map" style="width: 100%; height: 550px;display:block;"></div>
</body>

Then, here my gen_map-xml2.php

<?php
require("inc/header.php");

function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','&lt;',$htmlStr);
$xmlStr=str_replace('>','&gt;',$xmlStr);
$xmlStr=str_replace('"','&quot;',$xmlStr);
$xmlStr=str_replace("'",'&#39;',$xmlStr);
$xmlStr=str_replace("&",'&amp;',$xmlStr);
$xmlStr=str_replace("é",'&eacute;',$xmlStr);
$xmlStr=str_replace("è",'&egrave;',$xmlStr);
$xmlStr=str_replace("à",'&agrave;',$xmlStr);
return $xmlStr;
}

// Connexion à la base de données
$connection=mysql_connect ($host, $username, $password);
if (!$connection) {
  die('Not connected : ' . mysql_error());
}

// Vérification de la connexion
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}

// Commande sql de sélection
$query = "
SELECT * 
FROM markers 
WHERE 1
";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}

header("Content-type: text/xml");
// Start XML file, echo parent node
echo '<markers>';

// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
  // ADD TO XML DOCUMENT NODE
  echo '<marker ';
  echo 'name="' . parseToXML($row['name']) . '" ';
  echo 'address="' . parseToXML($row['address']) . '" ';
  echo 'nument="' . $row['nument'] . '" ';
  echo 'lat="' . $row['lat'] . '" ';
  echo 'lng="' . $row['lng'] . '" ';
  echo 'type="' . $row['type'] . '" ';
  echo '/>';
}

// End XML file
echo '</markers>';

?>

Can you help me ?

  • 写回答

1条回答 默认 最新

  • dthl8036 2014-08-08 14:08
    关注

    Success ! I create a php file with all location, and i create a loop with same criteria to have the exact listenning

    <?php
require("inc/header.php");

$fichier ="location.php";
$ouverture = fopen($fichier, "r" );
$ecriture = fopen($fichier, "w+" );

$reponse = $bdd->query('
SELECT * 
FROM client
WHERE 1
ORDER BY nom
');
while ($donnees = $reponse->fetch())
    {
    $id = $donnees['nument'];
    $rsent = preg_replace("/'/","\'",$donnees['nom']);
    $adresse = preg_replace("/'/","\'",$donnees['adresse']);
    $lat = $donnees['lat'];
    $lng = $donnees['lng'];
    $type = $donnees['type'];
    $location= "
        ['<a href=\"reporting_client.php?client=".$id."\">".$rsent."</a>                
        <br/>".$adresse."', ".$lat.", ".$lng."],

        ";
        fwrite($ecriture,$location);
    }
fclose($ouverture);
fclose($ecriture);
?>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
    var markers = [];
    function initialize() {

        var mapOptions = {
            zoom: 10,
            center: new google.maps.LatLng(40.714364, -74.005972),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);


        var locations = [
          <? include('location.php');?>  
        ];

        var marker, i;
        var infowindow = new google.maps.InfoWindow();


        google.maps.event.addListener(map, 'click', function() {
            infowindow.close();
        });

        for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map,
                icon: locations[i][3]
            });

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow.setContent(locations[i][0]);
                    infowindow.open(map, marker);
                }
            })(marker, i));

            markers.push(marker);
        }

    }
    google.maps.event.addDomListener(window, 'load', initialize);

    function myClick(id){
        google.maps.event.trigger(markers[id], 'click');
    }
</script>
<div id="googlemap" style="width: 100%; height: 500px;"></div>
<? 
$i=0;
$reponseNOM = $bdd->query('
SELECT * 
FROM client
WHERE 1
ORDER BY nom
');
while ($donneesNOM = $reponseNOM->fetch())
    {
    ?>
        <a href="#" onclick="myClick(<? echo $i;$i++?>);"><? echo $donneesNOM['nom'];?></a><br/>
    <?
    }
?>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位，为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 保护模式-系统加载-段寄存器