首先，我对谷歌地图或Javascript知之甚少，到目前为止，我所掌握的大部分内容都是从各种教程中复制、粘贴和粘贴在一起的(尽管我确实了解什么是做什么的)。
我有一张 map ，根据电子表格中的位置(通过 JSON 提要)显示标记。在这个电子表格中，我还为 data[i][4] 中的每个标记存储了一个数值。
最后有一个沼泽标准 html 输入类型范围 slider ，并将其值存储在一个全局变量 (slidervalue) 中，该变量会随着 slider 的移动而不断更新。
当 slider 移动时，如果存储在标记数据中的数值小于 slider 值，则该标记应该是可见的。如果数据值大于 slider 值，则应隐藏该标记。
我认为这可以使用 if else 语句和 Google maps setvisible 来实现。
到目前为止，这是我的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pound A Pint</title>
<style>
html, body {
margin: 0;
padding: 0;
width:100%;
height: 100%;
}
#map_canvas {
height: 100%;
width: calc(100% - 200px);
float:right;
}
#name {
float:left;
}
#price {
float:left;
}
#sliderAmount {
background-color: red;
display: inline-block;
}
</style>
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script>
// The web service URL from Drive 'Deploy as web app' dialog.
var DATA_SERVICE_URL = "https://script.google.com/macros/s/AKfycbwFFhKaVFHsr1g6sokrXd1kXPU0mbdKZzpVXE00X4CzS0nfng/exec?jsonp=callback";
var map;
var image = 'icon.png';
var slidervalue = 400;
function myFunction()
{
document.getElementById("sliderAmount").innerHTML= slidervalue;
}
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(51.5, -0.1),
zoom: 12,
mapTypeControl: false,
panControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.default,
position: google.maps.ControlPosition.LEFT_BOTTOM
}
});
var scriptElement = document.createElement('script');
scriptElement.src = DATA_SERVICE_URL;
document.getElementsByTagName('head')[0].appendChild(scriptElement);
}
function callback(data) {
for (var i = 0; i < data.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data[i][3], data[i][2]),
map: map,
icon: image
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
document.getElementById("name").innerHTML= data[i][0];
document.getElementById("pricespan").innerHTML= data[i][4];
}
})(marker, i));
}
}
function updateSlider(slideAmount) {
slidervalue = slideAmount;
document.getElementById("slidervalue").innerHTML = slidervalue;
}
</script>
</head>
<body onload="initialize()">
<div id="name">Name</div>
<div id="price">£<span id="pricespan"></span></div>
<input id="slide" type="range" min="1" max="500" step="1" value="400" onchange="updateSlider(this.value)">
<div onclick="myFunction()" id="sliderAmount">Click me</div>
<div id="slidervalue"></div>
<div id="map_canvas"></div>
</body>
</html>
谢谢你的帮助。
最佳答案
markers=[];
store the markers in this array, and store the numeric value as a property of the markers:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data[i][3], data[i][2]),
map: map,
value:data[i][4],
visible:slidervalue >= data[i][4]
});
markers.push(marker);
updateSlider遍历数组并根据比较设置可见属性:function updateSlider(slideAmount) {
for(var i=0;i<markers.length;++i){
markers[i].setVisible(slideAmount>=markers[i].get('value'));
}
slidervalue = slideAmount;
document.getElementById("slidervalue").innerHTML = slidervalue;
}
关于google-maps-api-3 - 基于 slider 值与数据值相比隐藏/显示谷歌地图标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21076505/