Question

我正在制作一个传单地图，该地图从数据库中获取其标记和弹出信息。我有一个下拉菜单，允许我检索整个数据库的子集。下拉菜单和地图可以正常工作。

我有2个问题。第一，我一直无法使fitBounds正常工作。第二个问题是，当地图从下拉列表加载类别的标记时，我希望移除地图上的所有现有标记。

<link rel="stylesheet" href="leaflet.css" />
<script src="leaflet-src.js"></script>
<script type="text/javascript" src="leaflet.ajax.js"></script>
<title>Member Map</title>
</head>
<body>
    <div id="options">
            <?php
                $conn = new mysqli("localhost","","","") or die($this->mysqli->error);
                $result = $conn->query("SELECT Bus_categories FROM markers GROUP BY Bus_categories");
                echo "<form>";
                        echo "<select name='cs' onchange='showUser (this.value)'>";
                            echo "<option style='value=selected'>Select Business Category</option>";
                            while ($row = $result->fetch_assoc()) {
                            unset($name);
                            $name = $row['Bus_categories']; 
                            echo '<option  value="'.$name.'">'.$name.'</option>';
                            }
                            echo "</select></form>";
            ?>
    </div>
    <div id="map"></div>
        <script type="text/javascript">
            var m= L.map('map').setView([39.1, -94.5], 8);
            var mopt = {
                url: 'https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/256/{z}/{x}/{y}?access_token=<API KEY HERE>',
                options: {attribution:'© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'}
            };
            var mq=L.tileLayer(mopt.url,mopt.options);
            mq.addTo(m);
        function popUp(feature,layer) {
            layer.bindPopup(
                "<h2>"+feature.properties.Member_Name+
                "<h3>"+feature.properties.Address+
                "<br>"+feature.properties.City+
                "<br><br><a href=tel:"+feature.properties.Phone+ ">" +feature.properties.Phone+ "</a>" +
                "<br><br><a href=mailto:"+feature.properties.Email+ ">" +feature.properties.Email+ "</a>" +
                "<br><br><a href=http://"+feature.properties.Website+ ">" +feature.properties.Website+ "</a>" +
                "<br>"
            );

              }
        function showUser(str) {
        var geojsonLayer = new L.GeoJSON.AJAX(["geojson.php?cs="+str,true],{onEachFeature:popUp}).addTo(m);    
//I thought --  m.fitBounds(geojsonLayer.getBounds()); -- & --  geojsonLayer.clearLayers(m); -- would go here, but that doesn't work.   
            }
        </script>
</body>

如何清除现有标记，然后进行缩放以适合传单地图？

0 个答案: