google map上的标记聚类不起作用，但是显示了所有位置？

问题描述 投票：0回答：1

您好，我的问题是标记群集无法运行，但控制台中没有错误。但是，创建的map ive基于sql数据库中的数据显示所有标记，该数据通过php从sql转换为xml，然后从显示标记的js文件中进行请求。我不确定是不是它的标记文件在js文件中的位置或其他问题。任何建议都很好。

JS代码

           function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
                center: new google.maps.LatLng(51.8642112, -2.2380335),
                zoom: 11 
            });

            var infoWindow = new google.maps.InfoWindow();

            downloadUrl("./MapStolenDAO.php", 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 address = markerElem.getAttribute('address');
                var time = markerElem.getAttribute('time');
                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 = address
                infowincontent.appendChild(strong);
                infowincontent.appendChild(document.createElement('br'));

                var text = document.createElement('text');
                text.textContent = time
                infowincontent.appendChild(text);
                var marker = new google.maps.Marker({
                    position: point,
                    map: map
                });

                marker.addListener('click', function() {
                  infoWindow.setContent(infowincontent);
                  infoWindow.open(map, marker);
                });
                var markerCluster = new MarkerClusterer(map, marker,
                    {imagePath: './mapImages'});
            });
        });
    }

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

        request.onreadystatechange = function() {

**通过PHP代码将SQL转换为XML **

<?php
$username="username is here but removed for privacy";
$password="password is here but removed for privacy";
$database="DBFlogger";

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);
return $xmlStr;
}

// Opens a connection to a MySQL server
$connection = mysqli_connect('localhost', $username, $password);
if (!$connection) {
    error_log("Failed to connect to MySQL: " . mysqli_error($connection));
    die('Internal server error');
}

// Set the active MySQL database
$db_selected = mysqli_select_db($connection, $database);
if (!$db_selected) {
    error_log("Database selection failed: " . mysqli_error($connection));
    die('Internal server error');
}

// Select all the rows in the markers table
$query = "SELECT * FROM tblBikeStolen WHERE 1";
$result = mysqli_query($connection, $query);
if (!$result) {
    error_log("Database query failed:" . mysqli_error($connection));
    die('Internal server error');
}

header("Content-type: text/xml");

// Start XML file, echo parent node
echo "<?xml version='1.0' ?>";
echo '<markers>';
$ind=0;
// Iterate through the rows, printing XML nodes for each
while ($row = @mysqli_fetch_assoc($result)){
  // Add to XML document node
  echo '<marker ';
  echo 'id="' . $row['BikeID'] . '" ';
  echo 'address="' . parseToXML($row['Address']) . '" ';
  echo 'lat="' . $row['Lat'] . '" ';
  echo 'lng="' . $row['Lng'] . '" ';
  echo 'time="' . $row['stolenTimestamp'] . '" ';
  echo '/>';
  $ind = $ind + 1;
}

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

?>

HTML文件

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../../styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/57cdec9607.js" crossorigin="anonymous"></script>

</head>
<body>
<header>
    <a href="" style="float:left">BIKEIT!</a>
    <a href="../Public/Contacts.html">CONTACT</a>
    <a href="../Public/AboutUs.html">ABOUT</a>
    <a href="../Public/FAQ.html">FAQ</a>
    <a href="../Police/Police_Home.html">HOME</a>
</header>
<div id="master"></div>
<h1 style="color: white; margin: 10px; text-align: center">Victim Location Frequency Map</h1>
<div id="content">
    <div id="map" style="width:60%;height:700px;"></div>

        <script src="MapStolen.js"></script>

        <script src="https://unpkg.com/@google/[email protected]/dist/markerclustererplus.min.js"></script>

        <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAFkcR79QqNX1TuaLjSCmfgdSujOeYt1FU&callback=initMap">
        </script>

    </div>
    <div class="space"></div>
<!-- Site footer -->
    <footer class="site-footer">
        <div class="footcontainer">
            <div class="footrow">
                <div class="col-1-2 flL">
                    <img src="../../resources/gloucestershire-logo-header.png" class="footlogo">
                </div>

            <div class="col-1-4 flL">
                <h6>Quick Links</h6>
                <ul class="footer-links">
                    <li><a href="../Public/AboutUs.html">About Us</a></li>
                    <li><a href="../Public/Contacts.html">Contact Us</a></li>
                    <li><a href="https://www.gloucestershire.police.uk/contact/find-a-police-station/">Find a police station</a></li>
                    <li><a href="https://www.gloucestershire.police.uk/hyg/fpngloucs/privacy-notice/">Privacy Policy</a></li>
                    <li><a href="#">Cookies</a></li>
                    <li><a href="https://www.gloucestershire.police.uk/hyg/terms-conditions/">Terms and conditions</a></li>
                </ul>
            </div>

            <div class="col-1-4 flL">
                <h6>Partners</h6>
                <ul class="footer-links">
                    <li><a    href="https://www.gloucestershire.police.uk/">Gloucestershire Constabulary</a> </li>
                    <li><a href="https://www.police.uk/">Police.co.uk</a></li>
                    <li><a href="https://www.askthe.police.uk/content/@1.htm">Ask the Police</a></li>
                    <li><a href="https://www.gloucestershire-pcc.gov.uk/">Police and Crime Commissioner</a></li>
                </ul>
            </div>
        </div>
        <hr>
    </div>
    <div class="footcontainer">
        <div class="footrow">
            <div class="col-2-3 flL">
                <p class="copyright-text">Copyright &copy; 2020 All Rights Reserved by 
                <a href="https://www.gloucestershire.police.uk/">Gloucestershire Constabulary</a>
                     &amp; 
                <a href="../Police/Police_Home.html">BikeIt</a>.
                </p>
                </div>

            <div class="col-1-3 flL">
                <ul class="social-icons">
                    <li><a class="facebook" href="https://www.facebook.com/gloucestershire.constabulary"><i class="fa fa-facebook"></i></a></li>
                    <li><a class="twitter" href="https://twitter.com/glos_police"><i class="fa fa-twitter"></i></a></li>
                    <li><a class="youtube" href="https://www.youtube.com/user/GlosPolice"><i class="fab fa-youtube"></i></a></li>
                    <li><a class="snapchat" href="https://www.snapchat.com/add/glospol"><i class="fab fa-snapchat-ghost"></i></a></li>   
                </ul>
            </div>
        </div>
    </div>
</footer>

javascript php dictionary web markerclusterer
1个回答
0
投票

关于解决方案，经过一些研究，我在解决该问题的论坛上提到了这个问题。

（this）Combine Geocode with marker clustering

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.