Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,038

HOME > PHP > PHP Forum > ต้องการทำ google map marker clusterer ที่ดึงมาผลมากจาก database ครับ [ช่วยด้วยครับเครียดมากๆ]

[PHP] ต้องการทำ google map marker clusterer ที่ดึงมาผลมากจาก database ครับ [ช่วยด้วยครับเครียดมากๆ]

เริ่มหัวข้อใหม่

Estus

โพสกระทู้ ( 8 )
บทความ ( 0 )

พอดีตอนนี้ผมกำลังทำในส่วนของ google map อยู่หน่ะครับแล้วติดปัญหาตรงในส่วนของ marker clusterer จึงอยากให้ช่วยทีครับติดมาหลายวันแล้วครับ ขอบคุณล่วงหน้าครับ

<!DOCTYPE html>
<html>
  <head>
    <link rel="icon" href="image/favicon.ico" type="image/x-icon" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Device Marker Clustering</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
  <table align="center"><tr><td>
  <?php include 'header.php';?>
  </td></tr></table>
    <div id="map"></div>
 <script>
        function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(18.299615,99.698478),
          zoom: 10
        });
        var infoWindow = new google.maps.InfoWindow;
                 
          // Change this depending on the name of your PHP or XML file
          downloadUrl('location.php', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var name = markerElem.getAttribute('name');
              var address = markerElem.getAttribute('link');
              var image = markerElem.getAttribute('image');
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng')));
 
 
              var infowincontent = document.createElement('div');
              //แสดง Name
              var strong = document.createElement('strong');
              strong.textContent = name
              infowincontent.appendChild(strong);
              infowincontent.appendChild(document.createElement('br'));
              var text = document.createElement('text');
              //แสดง Link
              text.textContent = address
              infowincontent.appendChild(text);
 
              var marker = new google.maps.Marker({
                map: map,
                        content: address,
                position: point
              });
               
              marker.addListener('click', function() {
                infoWindow.setContent(infowincontent);
                infoWindow.open(map, marker);
                map.setZoom(14);
                map.setCenter(marker.getPosition());
              });
            });
          });
        }
       
      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>
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDei0Xq1ecoQ0keWl_LWoS4gVHGFFjp2rw&;callback=initMap">
    </script>
  </body>
</html>

โค้ดที่ตอนนี้เรียกมาได้แค่ marker บนแผนที่หน่ะครับ

Tag : PHP, MySQL, JavaScript, Ajax

Date : 2017-01-11 00:38:30

By : modernarm

View : 1409

Reply : 3

No. 1

deawx

โพสกระทู้ ( 5,149 )
บทความ ( 26 )

ต้องเขียนให้ระบุ cluster ของ marker ด้วยครับ. แต่ก้อบมาแบบนี้ ผมก็ไม่รู้จะช่วยยังไง

ต้องสอบถามก่อนว่า ท่านรู้เกี่ยวกับ Google Map แค่ใหนก่อนครับ เพราะถ้าสอนไป ผมไม่อยากมาต้องเขียนให้ ผมจะได้บอกได้ถูกเลยว่า จะต้องทำตรงส่วนใหนก่อน

Date : 2017-01-11 10:29:33

By : deawx

No. 2

Estus

โพสกระทู้ ( 8 )
บทความ ( 0 )

ขอบคุณพี่เดี่ยวครับผม ผมเพิ่งศึกษาได้ไม่นานมากครับผม ยังไม่ค่อยรู้อะไรมากครับ
ผมเขียนตามแบบที่ Google สอนมาเลยครับผม

https://developers.google.com/maps/articles/phpsqlsearch_v3

ตัวนี้ครับผม ส่วนของ Clustering ที่อ่านๆมาก็พอจะรู้ว่าต้องนำเอาข้อมูลต่างๆมาจับใส่ Array ก่อน
แต่พอทำเข้าจริงๆก่อไม่ได้ครับ

Date : 2017-01-11 10:38:28

By : modernarm

No. 3

Estus

โพสกระทู้ ( 8 )
บทความ ( 0 )

ผมใส่ไว้หลัง Loop ของ Marker ถูกหรือป่าวครับ ขอบคุณครับ

Code

<!DOCTYPE html>
<html>
  <head>
  	<link rel="icon" href="image/favicon.ico" type="image/x-icon" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Marker Clustering</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 75%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script src="js/markerclusterer.js"></script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDei0Xq1ecoQ0keWl_LWoS4gVHGFFjp2rw&callback=initialize"></script>
  </head>
  <body>
  <table width="100%"><tr><td align="center"><?php include 'header.php';?></td></tr></table>
    <div id="map"></div>
 <script>
        function initialize() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(18.299615,99.698478),
          zoom: 10,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
                
          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() {}

          // Change this depending on the name of your PHP or XML file
          downloadUrl('location.php', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var name = markerElem.getAttribute('name');
              var address = markerElem.getAttribute('link');
              var image = markerElem.getAttribute('image');
              var point = new google.maps.LatLng(parseFloat(markerElem.getAttribute('lat')),parseFloat(markerElem.getAttribute('lng')));

              var marker = new google.maps.Marker({
                map: map,
                position: point,
                title : name  });
            });

            var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'images/m'});

          });
        }
    </script>
  </body>
</html>

Date : 2017-01-11 14:09:43

By : modernarm

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : ต้องการทำ google map marker clusterer ที่ดึงมาผลมากจาก database ครับ [ช่วยด้วยครับเครียดมากๆ]

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

Load balance : Server 04

Registered : 109,038

document.write("<font color=996600>[PHP]</font>"); [PHP] ต้องการทำ google map marker clusterer ที่ดึงมาผลมากจาก database ครับ [ช่วยด้วยครับเครียดมากๆ]

No. 1

No. 2

No. 3

ค้นหาข้อมูล

อัพโหลดแทรกรูปภาพ

Notice

[PHP] ต้องการทำ google map marker clusterer ที่ดึงมาผลมากจาก database ครับ [ช่วยด้วยครับเครียดมากๆ]