这是我的代码..目前我的 map 中有多个标记..我需要在搜索后过滤结果。我使用 java 脚本输入标签输入相关位置..并且还使用数据库“位置”将制造商加载到 map 中 任何帮助将不胜感激，
<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>
最佳答案
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);
}
上面的代码将帮助您将新标记推到 map 上....下面的代码将帮助您从 map 上清除您的标记....
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.
}
结合使用上述代码，您可以过滤 map 上的标记...希望对您有所帮助....:)
关于javascript - 过滤标记谷歌地图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37066120/