Javascript 使用php sql从数据库中创建google地图标记_Javascript_Php_Sql_Google Maps

Javascript 使用php sql从数据库中创建google地图标记

javascript php sql google-maps

Javascript 使用php sql从数据库中创建google地图标记,javascript,php,sql,google-maps,Javascript,Php,Sql,Google Maps,我有这段代码来从GoogleMap上的数据库填充标记，但它不起作用，xml文件完全起作用，我提到过，但没有任何用处 markers.php代码 <?php $servername = "localhost"; $username = "root"; $password = ""; $dbname = "jainmunilocator"; $connection=mysqli_connect($servername, $username, $password, $dbname);; if (

我有这段代码来从GoogleMap上的数据库填充标记，但它不起作用，xml文件完全起作用，我提到过，但没有任何用处

markers.php代码

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "jainmunilocator";
$connection=mysqli_connect($servername, $username, $password, $dbname);;
if (!$connection) {
    die("Connection failed: " . mysqli_connect_error());
}
$sql = "SELECT name,id,lat,lng FROM muni_location,munishri WHERE mid=id";
header('Content-Type: application/xml');
$result=mysqli_query($connection,$sql);
$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);
if (mysqli_num_rows($result) > 0)
  {
while($row = mysqli_fetch_assoc($result)){
if(isset($row['id'])){ $id = $row['id']; } 
 if(isset($row['name'])){ $name = $row['name']; } 
 if(isset($row['lat'])){ $lat = $row['lat']; } 
 if(isset($row['lng'])){ $lng = $row['lng']; } 
$node = $dom->createElement("marker");
  $newnode = $parnode->appendChild($node);
  $newnode->setAttribute("id",$id);
  $newnode->setAttribute("name", $name);
  $newnode->setAttribute("lat", $lat);
  $newnode->setAttribute("lng", $lng);
  }
  }
 echo $dom->saveXML();

?>

createElement（“标记”）；
$parnode=$dom->appendChild（$node）；
如果（mysqli_num_行（$result）>0）
{
while（$row=mysqli\u fetch\u assoc（$result））{
if（isset（$row['id']）{$id=$row['id']；}
if（isset（$row['name']）{$name=$row['name']；}
if（isset（$row['lat']）{$lat=$row['lat']；}
如果（isset（$row['lng']）{$lng=$row['lng']；}
$node=$dom->createElement（“标记”）；
$newnode=$parnode->appendChild（$node）；
$newnode->setAttribute（“id”，$id）；
$newnode->setAttribute（“名称”，$name）；
$newnode->setAttribute（“lat”，$lat）；
$newnode->setAttribute（“lng”，$lng）；
}
}
echo$dom->saveXML（）；
?>

*谷歌地图标记代码**

    <!DOCTYPE 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>PHP/MySQL & Google Maps Example</title>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
        <script type="text/javascript">
        //<![CDATA[


        function load() {
          var map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(22.6145,77.3418),
            zoom: 7,
            mapTypeId: 'roadmap'
          });
          var infoWindow = new google.maps.InfoWindow;
          var gm_marker = new Array();     

          // Change this depending on the name of your PHP file
          downloadUrl("markers.php", function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName("marker");
            for (var i = 0; i < markers.length; i++) {
              var id = markers[i].getAttribute("id");
              var name = markers[i].getAttribute("name");
              var point = new google.maps.LatLng(
                  parseFloat(markers[i].getAttribute("lat")),
                  parseFloat(markers[i].getAttribute("lng")));
              //var html = "<b>" + name + "</b> <br/>" + id;
              var html = name;
              var icon = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                title: name
              });
              addMarker(point,name);
              bindInfoWindow(marker, map, infoWindow, html);

            }
          });
        }

        //stackoverflow
        function addMarker(latLng, contentstr) {
      var marker = new google.maps.Marker({
        position: latLng,
        map: map
      });
      google.maps.event.addListener(marker, 'click', function() {   
          infowindow = new google.maps.InfoWindow({
              content: contentstr
          });  

       });
      gm_markers.push(marker);

    }
    setAllmap(map);
    function setAllMap(map) {
  for (var i = 0; i < gm_markers.length; i++) {
    gm_markers[i].setMap(map);
  }
  function showMarkers() { setAllMap(map);}


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

        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>

      </head>

      <body onload="load()">
      <div id="map-canvas-show" style="width: 100%; height: 300px;"></div> 
      </body>

    </html>


PHP/MySQL和googlemaps示例
//

我认为有两个元素是必不可少的，我在您的代码中没有看到。这是我的资料来源，我把它们放在这里是为了展示概念。您可以在for循环中实现这种类型的东西，也可以分解成函数。我更喜欢函数，所以我这样做了

首先，我要确认标记数组的长度不是0——这是一个简单的健全性检查——确保要加载标记

构建GoogleMapMarker堆栈虽然有标记

创建带有新标记的标记

使用新的

将标记作为标记对象数组推入谷歌的标记对象中

要显示标记，请将标记指定给地图将阵列中的每个标记与地图画布关联

// Sets the map on all markers in the array.
function setAllMap(map) {
  for (var i = 0; i < gm_markers.length; i++) {
    gm_markers[i].setMap(map);
  }

显示已加载的标记的步骤（打开）在视图中显示带有标记的地图

<div id="map-canvas-show" style="width: 100%; height: 300px;"></div>

调试步骤（已添加）

我建议首先确认有效坐标正在加载到php中的标记变量中。事实上，我会从一个标记开始测试。放入调试语句以显示lat和lng。这是必要的。确认从php到js的有效标记数据

然后，您需要确认这些标记在您的谷歌地图的可见范围内。这些标记在那里，只是不可见吗？为了帮助你，我建议你把谷歌地图放大一点——放大它，这样你就可以看到一个在半个地球上的标记

地图是否显示没有标记，或者什么都没有显示？地图正在显示，但是没有标记，并且markers.php工作正常？是的，工作正常生成的XML是什么样子的？请提供一个例子来说明这个问题。那太好了。请接受这一有用的答案好吗？检查新编辑的代码现在地图也正在加载，你能看看你在我的代码中提到的函数吗，而不知道你的眼镜地图javascript的输入我不会冒险猜测。我添加了几个调试想法。看看你能看到什么，我可以根据需要补充更多的答案。

// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
  setAllMap(null);

}

// Shows any markers currently in the array.
function showMarkers() {
  setAllMap(map);

}

<div id="map-canvas-show" style="width: 100%; height: 300px;"></div>