带有Google Maps API的群集标记，来自数据库的位置 [英] Cluster Markers with Google Maps API, locations from database

问题描述

我正在创建一个基于来自我的数据库信息的标记填充的Google地图。我遵循教程。

地图工作正常，但是由于我的一些标记靠得很近，我想利用标记聚类。我已经通过Google的标记集群教程了解了我的所能。

然而，我找不到一种方法来实现它。我的标记只是显示了它们的方式，没有任何聚类。我想我已经遵循了所有的步骤，将JS文件链接到我的HTML，下载并上传标记图标和JS文件到我的托管站点等。

我可以继续从我的数据库创建标记，但也可以聚集标记？

我已经测试了来自google marker clusterer教程的确切代码，并且一切正常。 （但标记不在我需要的位置。）

我的HTML（PHP）网页的简化版本如下所示：

 <！DOCTYPE html> 
< html lang =en> 
< head> 
< title>我的网站< / title> 
< style> 
 map {
 height：400px; 
宽度：98％; 
 border：5px首钢SteelBlue; 
} 
< / style> 
< / head> 
< body> 
 
 <！ -  Google Map  - > 
< div id ='map'> 
< / div> 
 
 
 
 <！ -  Google MAPS API&自定义地图JS  - > 
 
<！ - 这是我的个人文件，包含主要的Javascript代码 - > 
< script src =findermap.js>< / script> 
 
 <！ - 下载此文件的链接由Google教程提供 - > 
< script src =markerclusterer.js>< / script> 
 
 <！ - 基本Google Maps API密钥链接 - > 
< script async defer 
 src =https://maps.googleapis.com/maps/api/js?key=MY-KEY-IS-USED-HERE&callback=initMap> 
< / script> 
 
< / body> 
< / html> 
  

这里基本上是我使用的JavaScript文件findermap.js

 函数initMap（）{
 var map = new google.maps.Map（document.getElementById（'map'），{
 center：new google.maps.LatLng（0，0），
 zoom：1 
}）; 
 
 
 var customIcons = {
 type1：{
 icon：'icon_type1.png'
}，
 type2：{
图标：'icon_type2.png'
}，
 type3：{
图标：'icon_type3.png'
}，
 type4：{
图标：'icon_type4.png'
} 
}; 
 var markers = []; 
 var infoWindow = new google.maps.InfoWindow; 
 
 
 //根据您的PHP或XML文件的名称更改此值
 downloadUrl（'https://my-website.com/getinfo.php'，function（ （标记2），函数（markerElem） {
 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 =地址
 infowincontent.appendChild（text）; 
 var icon = customIcons [type] || {}; 
 var marker = new google.maps.Marker（{
 map：map，
 position：point，
 icon：icon.icon，
 label：icon.label 
}）; 
 
 $ b marker.addListener（'click'，function（）{
 infoWindow.setContent（infowincontent）; 
 infoWindow.open（map，marker）; 
}）; 
 
 
 markers.push（marker）; 
 
}）; 
 
}）; 
 
 var options = {
 imagePath：'/ clustericons / m'
}; 
 
 //添加一个标记聚类器来管理标记。 
 var markerCluster = new MarkerClusterer（map，markers，options）; 
} 
 
函数downloadUrl（url，callback）{
 var request = window.ActiveXObject？ 
 new ActiveXObject（'getinfo.php'）：
 new XMLHttpRequest; 
 
 request.onreadystatechange = function（）{
 if（request.readyState == 4）{
 request.onreadystatechange = doNothing; 
回调（request，request.status）; 
} 
}; 
 
 request.open（'GET'，url，true）; 
 request.send（null）; 
 
 
函数doNothing（）{} 
  

解决方案

我找到了！这是解决方案。这是更新的JavaScript文件：

  var customIcons = {
 type1：{
 icon：'icon_type1 .png'
}，
 type2：{
图标：'icon_type2.png'
}，
 type3：{
图标：'icon_type3.png '
}，
 type4：{
 icon：'icon_type4.png'
} 
}; 
 
函数initMap（）{
 var cluster = []; 
 var map = new google.maps.Map（document.getElementById（map），{
 center：new google.maps.LatLng（0，0），
 zoom：1， 
 mapTypeId：'roadmap'
}）; 
 var infowindow = new google.maps.InfoWindow（）; 
 
 //根据您的PHP文件的名称更改此值
 downloadUrl（'https://my-website.com/the-sweet-sweet-xml-info.php'，函数（数据）{
 var xml = data.responseXML; 
 var markers = xml.documentElement.getElementsByTagName（marker）; 
 for（var i = 0; i< markers。长度;我++）{
 var name = markers [i] .getAttribute（name）; 
 var address = markers [i] .getAttribute（address）; 
 var type =标记[i] .getAttribute（type）; 
 var point = new google.maps.LatLng（
 parseFloat（markers [i] .getAttribute（lat）），
 parseFloat （markers [i] .getAttribute（lng）））; 
 
 var html =< b>+ 
 markers [i] .getAttribute（name）+ 
< / b>< br />+ 
标记[i] .getAttribute（address）; 
 
 var icon = cust omIcons [type] || {}; 
 var marker = new google.maps.Marker（{
 map：map，
 position：point，
 icon：icon.icon，
}）; 
 google.maps.event.addListener（marker，'click'，（function（marker，i）{
 return function（）{
 infowindow.setContent（
< b>+ 
 markers [i] .getAttribute（name）+ 
< / b>< br />+ 
 markers [i] .getAttribute（地址）
）; 
 infowindow.open（map，marker）; 
 
 //这将信息从点击图标发送回服务器端代码
文档。 getElementById（setlatlng）。innerHTML = markers [i] .getAttribute（name）; 
} 
}）（marker，i））; 
 cluster.push（marker）; 
} 
 
 var options = {
 imagePath：'/ location-of-cluster-icons / m'
}; 
 
 var mc = new MarkerClusterer（map，cluster，options）; 
}）; 
 
 
函数bindInfoWindow（marker，map，infoWindow，html）{
 google.maps.event.addListener（marker，'click'，function（）{
 infoWindow.setContent（html）; 
 infoWindow.open（map，marker）; 
 
}）; 
} 
 
函数downloadUrl（url，callback）{
 var request = window.ActiveXObject？ 
 new ActiveXObject（'the-sweet-sweet-xml-info.php'）：
 new XMLHttpRequest; 
 
 request.onreadystatechange = function（）{
 if（request.readyState == 4）{
 request.onreadystatechange = doNothing; 
回调（request，request.status）; 
} 
}; 
 
 request.open（'GET'，url，true）; 
 request.send（null）; 
 
 
函数doNothing（）{} 
  

I am creating a google map that is populated with markers based upon information from my database. I have followed the tutorial provided from Google in this first step.

The map works fine, however since some of my markers are close together, I would like to take advantage of marker clustering. I’ve followed what I can from Google's tutorial on marker clustering.

However, I cannot find a way to get it to work. My markers just show up the way they are, without any clustering. I think I have followed all of the steps, linking the JS file to my HTML, downloading and uploading the marker icons and JS file to my hosting site, etc.

How can I continue to create markers from my database, but also cluster the markers?

I have tested the exact code from the google marker clusterer tutorial, and everything works fine. (However the markers are not in the locations I need.)

A simplified version of my HTML(PHP) webpage is as follows:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>My Website</title>
    <style>
        map {
    height: 400px;
    width: 98%;
    border: 5px outset SteelBlue;
    }
    </style>
    </head>
<body>

                <!-- Google Map -->
                <div id='map'>
                </div>



<!-- Google MAPS API & Custom Maps JS-->

    <!-- This is my personal file that houses the main Javascript code -->
        <script src="findermap.js"></script>

    <!-- A link to download this file is provided by the Google tutorial -->
        <script src="markerclusterer.js"></script>

    <!-- Basic Google Maps API key link -->
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=MY-KEY-IS-USED-HERE&callback=initMap">
    </script>

</body>
</html>

Here is basically the JavaScript file I use, "findermap.js"

            function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
              center: new google.maps.LatLng(0, 0),
              zoom: 1
            });


            var customIcons = {
                    type1: {
                      icon: 'icon_type1.png'
                    },
                    type2: {
                      icon: 'icon_type2.png'
                    },
                    type3: {
                      icon: 'icon_type3.png'
                    },
                    type4: {
                      icon: 'icon_type4.png'
                    }
            };
            var markers = [];
            var infoWindow = new google.maps.InfoWindow;


              // Change this depending on the name of your PHP or XML file
              downloadUrl('https://my-website.com/getinfo.php', function(data) {
                var xml = data.responseXML;
                var markers2 = xml.documentElement.getElementsByTagName('marker');
                Array.prototype.forEach.call(markers2, function(markerElem) {
                  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 = customIcons[type] || {};
                  var marker = new google.maps.Marker({
                    map: map,
                    position: point,
                    icon: icon.icon,
                    label: icon.label
                  });


                  marker.addListener('click', function() {
                    infoWindow.setContent(infowincontent);
                    infoWindow.open(map, marker);
                  });


                 markers.push(marker);

                });

              });

                  var options = {
                      imagePath: '/clustericons/m'
                  };

              // Add a marker clusterer to manage the markers.
                  var markerCluster = new MarkerClusterer(map, markers, options);
            }

            function downloadUrl(url, callback) {
            var request = window.ActiveXObject ?
                new ActiveXObject('getinfo.php') :
                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() {}

解决方案

I Found it! Here is the solution. This is the updated javascript file:

    var customIcons = {
                type1: {
                  icon: 'icon_type1.png'
                },
                type2: {
                  icon: 'icon_type2.png'
                },
                type3: {
                  icon: 'icon_type3.png'
                },
                type4: {
                  icon: 'icon_type4.png'
                }
        };

        function initMap() {
          var cluster = [];
          var map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(0, 0),
            zoom: 1,
            mapTypeId: 'roadmap'
          });
    var infowindow = new google.maps.InfoWindow();

          // Change this depending on the name of your PHP file
          downloadUrl('https://my-website.com/the-sweet-sweet-xml-info.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 point = new google.maps.LatLng(
                  parseFloat(markers[i].getAttribute("lat")),
                  parseFloat(markers[i].getAttribute("lng")));

              var html= "<b>" + 
              markers[i].getAttribute("name") + 
              "</b> <br/>" + 
              markers[i].getAttribute("address");

              var icon = customIcons[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                icon: icon.icon,
              });
              google.maps.event.addListener(marker, 'click', (function(marker, i) {
                            return function() {
                                infowindow.setContent(
                                "<b>" + 
                                markers[i].getAttribute("name") + 
                                "</b> <br/>" + 
                                markers[i].getAttribute("address")
                                );
                                infowindow.open(map, marker);

                                //This sends information from the clicked icon back to the serverside code
                                document.getElementById("setlatlng").innerHTML = markers[i].getAttribute("name");
                            }
                        })(marker, i));
              cluster.push(marker);
            }

            var options = {
                  imagePath: '/location-of-cluster-icons/m'
              };

            var mc = new MarkerClusterer(map,cluster,options);
          });
        }

        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('the-sweet-sweet-xml-info.php') :
              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() {}

这篇关于带有Google Maps API的群集标记，来自数据库的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！