如何在PHP中使用多个位置和多个标记显示Google地图 [英] How to Show Google Maps with Multiple Locations and Many Markers in PHP

查看：81
本文介绍了如何在PHP中使用多个位置和多个标记显示Google地图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

实际上，我在我的网站上创建了基本的Google地图，我需要如何在PHP中显示具有多个位置和多个标记的Google地图，我已经在数据库中存储了（名称，地址，纬度，经度等）数据，请如何

这里是我的php代码： 

 
 <？php 
 $ dbhost ='localhost'; 
 $ dbuser ='root'; 
 $ dbpwd =''; 
 $ dbname ='rentozy_db'; 
 $ db = new mysqli（$ dbhost，$ dbuser，$ dbpwd，$ dbname）; 
 
 
 $ sql ='select * from`tbl_master_property`;'; 
 $ result = $ db-> query（$ sql）; 
 $ b $ attribs = array（'pg_id'，'name'，'pg_address'，'lat'，'lng'，'pg_type'）; 
 
 
 $ dom = new DOMDocument（'1.0'）; 
 $ root = $ dom-> createElement（'tbl_master_property'）; 
 $ dom-> appendChild（$ root）; 
 
 $ b $ while（$ rs = $ result-> fetch_object（））{
 $ node = $ dom-> createElement（'tbl_master_property'）; 
 $ root-> appendChild（$ node）; 
 
 foreach（$ attribs as $ attrib）{
 $ attr = $ dom-> createAttribute（$ attrib）; 
 $ value = $ dom-> createTextNode（$ rs-> $ attrib）; 
 $ attr-> appendChild（$ value）; 
 $ node-> appendChild（$ attr）; 
} 
} 
 echo $ dom-> saveXML（）; 
？>

这里是我的脚本代码： 

 < div class =map> 
< div id =map>< / div> 
< script> 
 var customLabel = {
 restaurant：{
 label：'R'
}，
 bar：{
 label：'B'
 } 
}; 
 
函数initMap（）{
 var map = new google.maps.Map（document.getElementById（'map'），{
 center：new google.maps.LatLng（ -33.863276，151.207977），
 zoom：12 
}）; 
 var infoWindow = new google.maps.InfoWindow; 
 
 //根据您的PHP或XML文件的名称更改此值
 downloadUrl（'https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml'，function（数据）{
 var xml = data.responseXML; 
 var markers = xml.documentElement.getElementsByTagName（'marker'）; 
 Array.prototype.forEach.call（markers，function（markerElem） {
 var id = markerElem.getAttribute（'id'）; 
 var name = markerElem.getAttribute（'name'）; 
 var address = markerElem.getAttribute（'address'）; 
 var type = markerElem.getAttribute（'type'）; 
 var point = new google.maps.LatLng（
 parseFloat（markerElem.getAttribute（'lat'）），
 parseFloat （markerElem.getAttribute（'lng'）））; 
 
 var infowincontent = document.createElement（'div'）; 
 var strong = document.cre ateElement（'strong'）; 
 strong.textContent = name 
 infowincontent.appendChild（strong）; 
 infowincontent.appendChild（document.createElement（'br'））; 
 
 var text = document.createElement（'text'）; 
 text.textContent =地址
 infowincontent.appendChild（text）; 
 var icon = customLabel [type] || {}; 
 var marker = new google.maps.Marker（{
 map：map，
 position：point，
 label：icon.label 
}）; 
 marker.addListener（'click'，function（）{
 infoWindow.setContent（infowincontent）; 
 infoWindow.open（map，marker）; 
}）; 
}）; 
}）; 
} 
函数downloadUrl（url，callback）{
 var request = window.ActiveXObject？ 
 new ActiveXObject（'Microsoft.XMLHTTP'）：
 new XMLHttpRequest; 
 
 request.onreadystatechange = function（）{
 if（request.readyState == 4）{
 request.onreadystatechange = doNothing; 
回调（request，request.status）; 
} 
}; 
 
 request.open（'GET'，url，true）; 
 request.send（null）; 
} 
 
函数doNothing（）{} 
< / script> 
< script async defer 
 src =https://maps.googleapis.com/maps/api/js?key=AIzaSyDvyRXDlH8lyIFaFMPldx_hK2Nfh-hduDE&callback=initMap> 
< / script> 
< / div>


解决方案

继上一个问题和答案之后，我给了你或许

 <？php 
 if（$ _SERVER ['REQUEST_METHOD'] = ='GET'&&！empty（$ _GET ['action']）&& $ _GET ['action'] =='getXML'）{
 
 $ dbhost ='localhost ; 
 $ dbuser ='root'; 
 $ dbpwd ='xxx'; 
 $ dbname ='xxx'; 
 $ db = new mysqli（$ dbhost，$ dbuser，$ dbpwd，$ dbname）; 
 
 $ sql ='select * from`markers`;'; 
 $ result = $ db-> query（$ sql）; 
 $ b $ attribs = array（'id'，'name'，'address'，'lat'，'lng'，'type'）; 
 
 
 $ dom = new DOMDocument（'1.0'，'utf-8'）; 
 $ dom-> formatOutput = true; 
 $ dom-> standalone = true; 
 $ dom-> recover = true; 
 
 
 $ root = $ dom-> createElement（'tbl_master_property'）; 
 $ dom-> appendChild（$ root）; 
 
 $ b $ while（$ rs = $ result-> fetch_object（））{
 $ node = $ dom-> createElement（'marker'）; 
 $ root-> appendChild（$ node）; 
 
 foreach（$ attribs as $ attrib）{
 $ attr = $ dom-> createAttribute（$ attrib）; 
 $ value = $ dom-> createTextNode（$ rs-> $ attrib）; 
 $ attr-> appendChild（$ value）; 
 $ node-> appendChild（$ attr）; 
} 
} 
 
 header（'Content-Type：application / xml'）; 
 exit（$ dom-> saveXML（））; 
} 
？> 
<！doctype html> 
< html> 
< head> 
< meta charset ='utf-8'/> 
< title> G00gle地图< / title> 
 
< script> 
 var _markers = []; 
函数downloadUrl（url，callback）{
 var xhr = new XMLHttpRequest; 
 xhr.onreadystatechange = function（）{
 if（this.readyState == 4&& this.status == 200）callback（this.responseXML）; 
}; 
 xhr.open（'GET'，url，true）; 
 xhr.send（null）; 
 
 
函数initMap（）{
 var customLabel = {
 restaurant：{label：'R'}，
 bar：{label：' B'} 
}; 
 
 var div = document.getElementById（'map'）; 
 var options = {
 center：new google.maps.LatLng（-33.863276，151.207977），
 zoom：12 
}; 
 
 var map = new google.maps.Map（div，options）; 
 var infoWindow = new google.maps.InfoWindow; 
 
 var _callback = function（xml）{
 var markers = Array.prototype.slice.call（xml.documentElement.getElementsByTagName（'marker'））; 
 markers.forEach（function（mkr）{
 var id = mkr.getAttribute（'id'）; 
 var lat = mkr.getAttribute（'lat'）; 
 var lng = mkr.getAttribute（'lng'）; 
 var address = mkr.getAttribute（'address'）; 
 var type = mkr.getAttribute（'type'）; 
 
 var latlng = new google.maps.LatLng（lat，lng）; 
 var label = customLabel [type] || {}; 
 
 console.info（'id =％s lat =％s lng =％s address =％s type =％s'，id，lat，lng，address，type）; 
 
 var marker = new google.maps.Marker（{
 map：map，
 position：latlng，
 title：address 
}）; 
 marker.addListener（'click'，function（e）{
 console.info（e.latLng.lat（）+'，'+ e.latLng.lng（））; 
 infoWindow.setContent（decodeURI（address））; 
 infoWindow.open（map，marker）; 
}）; 
 
 _markers.push（marker）; 
}）; 
 
 
 $ b / *获取xml数据* / 
 var xml = downloadUrl（'？action = getXML'，_callback）; 
} 
< / script> 
< script async defer src =// maps.googleapis.com/maps/api/js?key=AIzaSyDvyRXDlH8lyIFaFMPldx_hK2Nfh-hduDE&callback=initMap\"> ;</script> 
< style type ='text / css'charset ='utf-8'> 
 #map {
 width：800px; 
 height：600px; 
} 
< / style> 
< / head> 
< body> 
< div id ='map'>< / div> 
< / body> 
< / html>


Actually,i have created basic google map in my website i need How to Show Google Maps with Multiple Locations and Many Markers in PHP, i have stored data like(name, address,latitude,longitude) in database, please how to show exactly place marker in my google map please help me.

Here my php code:

<?php
  $dbhost =   'localhost';
    $dbuser =   'root'; 
    $dbpwd  =   ''; 
    $dbname =   'rentozy_db';
    $db =   new mysqli( $dbhost, $dbuser, $dbpwd, $dbname );


$sql='select * from `tbl_master_property`;';
    $result=$db->query( $sql );

    $attribs=array('pg_id','name','pg_address','lat','lng','pg_type');


    $dom=new DOMDocument('1.0');
    $root=$dom->createElement('tbl_master_property');
    $dom->appendChild($root);


    while( $rs=$result->fetch_object() ){
        $node=$dom->createElement('tbl_master_property');
        $root->appendChild($node);

         foreach( $attribs as $attrib ){
            $attr = $dom->createAttribute($attrib);
            $value= $dom->createTextNode($rs->$attrib);
            $attr->appendChild($value);
            $node->appendChild($attr);
        }
      }
    echo $dom->saveXML();  
?>

here my script code:

<div class="map">
      <div id="map"></div>
    <script>
            var customLabel = {
        restaurant: {
          label: 'R'
        },
        bar: {
          label: 'B'
        }
      };

        function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-33.863276, 151.207977),
          zoom: 12
        });
        var infoWindow = new google.maps.InfoWindow;

          // Change this depending on the name of your PHP or XML file
          downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var id = markerElem.getAttribute('id');
              var name = markerElem.getAttribute('name');
              var address = markerElem.getAttribute('address');
              var type = markerElem.getAttribute('type');
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng')));

              var infowincontent = document.createElement('div');
              var strong = document.createElement('strong');
              strong.textContent = name
              infowincontent.appendChild(strong);
              infowincontent.appendChild(document.createElement('br'));

              var text = document.createElement('text');
              text.textContent = address
              infowincontent.appendChild(text);
              var icon = customLabel[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                label: icon.label
              });
              marker.addListener('click', function() {
                infoWindow.setContent(infowincontent);
                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>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvyRXDlH8lyIFaFMPldx_hK2Nfh-hduDE&callback=initMap">
    </script>
    </div>

解决方案

Following on from the previous question and answer I gave you should find the following of interest perhaps.

<?php
    if( $_SERVER['REQUEST_METHOD']=='GET' && !empty( $_GET['action'] ) && $_GET['action']=='getXML' ){

        $dbhost =   'localhost';
        $dbuser =   'root'; 
        $dbpwd  =   'xxx'; 
        $dbname =   'xxx';
        $db =   new mysqli( $dbhost, $dbuser, $dbpwd, $dbname );

        $sql='select * from `markers`;';
        $result=$db->query( $sql );

        $attribs=array('id','name','address','lat','lng','type');


        $dom=new DOMDocument('1.0','utf-8');
        $dom->formatOutput=true;
        $dom->standalone=true;
        $dom->recover=true;


        $root=$dom->createElement('tbl_master_property');
        $dom->appendChild( $root );


        while( $rs=$result->fetch_object() ){
            $node=$dom->createElement('marker');
            $root->appendChild( $node );

            foreach( $attribs as $attrib ){
                $attr = $dom->createAttribute( $attrib );
                $value= $dom->createTextNode( $rs->$attrib );
                $attr->appendChild( $value );
                $node->appendChild( $attr );
            }
        }

        header('Content-Type: application/xml');
        exit( $dom->saveXML() );
    }
?>
<!doctype html>
<html>
    <head>
        <meta charset='utf-8' />
        <title>G00gle Maps</title>

        <script>
            var _markers=[];
            function downloadUrl( url, callback ) {
                var xhr = new XMLHttpRequest;
                xhr.onreadystatechange = function() {
                    if( this.readyState == 4 && this.status==200 ) callback( this.responseXML );
                };
                xhr.open( 'GET', url, true );
                xhr.send( null );
            }

            function initMap(){
                var customLabel = {
                    restaurant:{ label:'R' },
                    bar:{ label:'B' }
                };

                var div=document.getElementById('map');
                var options={
                    center: new google.maps.LatLng( -33.863276, 151.207977 ),
                    zoom: 12
                };

                var map = new google.maps.Map( div, options );
                var infoWindow = new google.maps.InfoWindow;

                var _callback=function( xml ){
                    var markers = Array.prototype.slice.call( xml.documentElement.getElementsByTagName('marker') );
                    markers.forEach(function(mkr){
                        var id=mkr.getAttribute('id');
                        var lat=mkr.getAttribute('lat');
                        var lng=mkr.getAttribute('lng');
                        var address=mkr.getAttribute('address');
                        var type=mkr.getAttribute('type');

                        var latlng=new google.maps.LatLng(lat,lng);
                        var label = customLabel[ type ] || {};

                        console.info('id=%s lat=%s lng=%s address=%s type=%s',id,lat,lng,address,type);

                        var marker = new google.maps.Marker({
                            map: map,
                            position: latlng,
                            title:address
                        });
                        marker.addListener('click', function(e) {
                            console.info( e.latLng.lat() +','+e.latLng.lng() );
                            infoWindow.setContent( decodeURI( address ) );
                            infoWindow.open( map, marker );
                        });

                        _markers.push( marker );
                    });
                }


                /* fetch the xml data */
                var xml=downloadUrl( '?action=getXML', _callback );
            }
        </script>
        <script async defer src="//maps.googleapis.com/maps/api/js?key=AIzaSyDvyRXDlH8lyIFaFMPldx_hK2Nfh-hduDE&callback=initMap"></script>
        <style type='text/css' charset='utf-8'>
            #map{
                width:800px;
                height:600px;
            }
        </style>
    </head>
    <body>
        <div id='map'></div>
    </body>
</html>

这篇关于如何在PHP中使用多个位置和多个标记显示Google地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
PHP最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆