Question

这是我的代码..目前我的地图中有多个标记..我需要在搜索后过滤结果。我使用java Script输入标签输入相关位置..还使用数据库＆＃34; location＆＃34;将制造商装入地图任何帮助都将受到高度赞赏，

 <html>
    <head>
<link href="location.css" rel="stylesheet" type="text/css" media="screen">

<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100vh}
</style>
<script type="text/javascript"
  src=
"http://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-FxYoVTVq6Is6lD98&libraries=places">
</script>
<?php $servername = "localhost";
$username = "root";
$password = "";
$dbname = "location";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$sql = "SELECT CellName,Longitude,Latitude  FROM locationdata";
$result = $conn->query($sql);
if ($result->num_rows > 0) {

    // output data of each row
    $table_data;
    $arrayindex=0;
    while($row = $result->fetch_assoc()) {


        $table_data[$arrayindex][0]=$row["CellName"];
        $table_data[$arrayindex][1]=$row["Longitude"];
        $table_data[$arrayindex][2]=$row["Latitude"];
        $arrayindex++;
    }
        //echo $table_data[0][0];

} else {
    echo "0 results";
}
$conn->close();

?>

<script type="text/javascript">
var locations  = <?php echo json_encode( $table_data ) ?>;
var map
  function initialize() {

    var myOptions = {
      center: new google.maps.LatLng(7.9343623,80.2343398),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP

    };

    var map = new google.maps.Map(document.getElementById("default"),
        myOptions);

    setMarkers(map,locations)

  }

  function setMarkers(map,locations){

      var marker, i

for (i = 0; i < locations.length; i++)
 {

 var cellname = locations[i][0]
 var longi = locations[i][1]
 var lat = locations[i][2]
 //var add =  locations[i][3]

 latlngset = new google.maps.LatLng(lat, longi);

  var marker = new google.maps.Marker({
          map: map, title: cellname , position: latlngset
        });
        map.setCenter(marker.getPosition())


        var content = "cell name: " + cellname 

  var infowindow = new google.maps.InfoWindow()

google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
        return function() {
           infowindow.setContent(content);
           infowindow.open(map,marker);
        };
    })(marker,content,infowindow));

  }
  }

  </script>


 </head>
 <body onLoad="initialize()">
  <div id="header">
  <form id="searchForm"> 
     <input type="text" id="searchId"/>
     <script>// Create the search box and link it to the UI element.
        var input = document.getElementById('searchId');
        alert(input);
        var searchBox = new google.maps.places.SearchBox(input);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

        // Bias the SearchBox results towards current map's viewport.
        map.addListener('bounds_changed', function() {
          searchBox.setBounds(map.getBounds());
        });

        var places = searchBox.getPlaces();
        var bounds = new google.maps.LatLngBounds();
          places.forEach(function(place) {
            var icon = {
              url: place.icon,
              size: new google.maps.Size(71, 71),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(17, 34),
              scaledSize: new google.maps.Size(25, 25)
            }});</script>
     <button>Go</button>
    </form>
  <ul id="menubar">
        <li> <a href=" 2GLocation.html"><button type="button" class="btn btn-hot text-capitalize btn-xs">3G</a></button></li>
        <li> <a href=" location.php"><button>3G</button></a></li>
   </ul>
    <img id ="searchBtn" src=""/></div>
    <div id="content"><div id="default" style="width:100%; height:100%"></div></div>

 <script> document.write("locations");

 </body>
  </html>

Answer 1

如果您需要在检索数据结果后过滤，一种方法是在函数setMarkers（）内的for（）开始时过滤数据。

您可以使用＆＃39;继续＆＃39;跳过当前的互动步骤。如果您要过滤的条件不匹配，请订购。

function setMarkers(map, locations) {

var marker, i

for (i = 0; i < locations.length; i++)
{
  var cellname = locations[i][0]
  var longi = locations[i][1]
  var lat = locations[i][2]
  // here you can filter the data, for example:
  if (longi > 30.023 && longi < -13.22 ) {
    // if we want to exclude this range:
    continue;
  }
...

Answer 2

var markers = []; // declare a array of markers (Global here...)
for ( var index in <yourData>) {
        var marker = new google.maps.Marker({
                    position : new google.maps.LatLng(<yourlatlong>),
                    map : <yourmapObject>,
        });
        markers.push(marker);
}

以上代码将帮助您将新标记推送到地图上....以下代码将帮助您从地图中清除标记....

function clearMarkers() {
    for (var i = 0; i < markers.length; i++) {
        //your condition here...
        markers[i].setMap(null);
    }
    //markers = [];//use this to clear out all the markers.
}

使用上述代码的组合，您可以在地图上过滤您的标记...希望它有帮助.... :)

过滤标记谷歌地图

2 个答案: