フィルタリングマーカーGoogle Maps

これは私のコードです。現在、マップに複数のマーカーがあります。検索後に結果をフィルタリングする必要があります。あなたがデータ結果を取得した後フィルタリングする必要がある場合、私はフィルタリングマーカーGoogle Maps

<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>

出典

2016-05-06 Kaushi

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. 
}

上記のコードの組み合わせでマップ上のマーカーをフィルタリングすることができます。役立つことを願っています.... :)

出典

2016-05-06 07:24:33 Abhishek

、また、すべてのヘルプは高く評価されるだろうマップにロードメーカーのためのデータ・ベース「場所」を使用し、関連するlocation..andを入力するためのJavaスクリプトのinputタグを使用しますそのための1つの方法は、関数setMarkers（）の中のfor（）の先頭にあるデータをフィルタリングすることです。

フィルタリングする条件が一致しない場合は、「続行」の順序を使用するだけで、現在の処理ステップをスキップできます。

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; 
    } 
...

出典

2016-05-06 07:17:47

ありがとうございました...実際には、JavaScript入力によって指定された場所をフィルタリングする必要があります。私のコードのGOボタンの後に関連するloをフィルタリングする必要があるカチオン – Kaushi

フィルタリングマーカーGoogle Maps

答えて

関連する問題