Google maps api 3 基于滑块值与数据值的比较隐藏/显示google地图标记_Google Maps Api 3_Slider_Show_Marker

Google maps api 3 基于滑块值与数据值的比较隐藏/显示google地图标记

google-maps-api-3

Google maps api 3 基于滑块值与数据值的比较隐藏/显示google地图标记,google-maps-api-3,slider,show,marker,Google Maps Api 3,Slider,Show,Marker,首先，我对谷歌地图或Javascript知之甚少，目前为止我掌握的大部分内容都是从各种教程中复制、粘贴和粘贴在一起的（尽管我确实了解这些内容）我有一张地图，根据电子表格中的位置显示标记（通过JSON提要）。在这个电子表格中，我还为数据[I][4]中的每个标记存储了一个数值最后，使用一个bog标准html输入类型范围滑块，并将其值存储在一个全局变量（slidervalue）中，该变量随着滑块的移动而不断更新当滑块移动时，如果标记数据中存储的数值小于slidervalue，则该标记应可见。如果

首先，我对谷歌地图或Javascript知之甚少，目前为止我掌握的大部分内容都是从各种教程中复制、粘贴和粘贴在一起的（尽管我确实了解这些内容）

我有一张地图，根据电子表格中的位置显示标记（通过JSON提要）。在这个电子表格中，我还为数据[I][4]中的每个标记存储了一个数值

最后，使用一个bog标准html输入类型范围滑块，并将其值存储在一个全局变量（slidervalue）中，该变量随着滑块的移动而不断更新

当滑块移动时，如果标记数据中存储的数值小于slidervalue，则该标记应可见。如果数据值大于slidervalue，则应隐藏该标记

我假设这可以通过使用if-else语句和googlemaps 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>


一品脱
html，正文{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
}
#地图画布{
身高：100%；
宽度：计算（100%-200px）；
浮动：对；
}
#名字{
浮动：左；
}
#价格{
浮动：左；
}
#滑座{
背景色：红色；
显示：内联块；
}
//驱动器“作为web应用部署”对话框中的web服务URL。
var数据\服务\ URL=”https://script.google.com/macros/s/AKfycbwFFhKaVFHsr1g6sokrXd1kXPU0mbdKZzpVXE00X4CzS0nfng/exec?jsonp=callback";
var映射；
var image='icon.png'；
var slidervalue=400；
函数myFunction（）
{
document.getElementById（“sliderAmount”）.innerHTML=slidervalue；
}
函数初始化（）{
map=new google.maps.map（document.getElementById（'map_canvas'）{
中心：新google.maps.LatLng（51.5，-0.1），
缩放：12，
mapTypeControl:false，
泛控制：错误，
ZoomControl选项：{
样式：google.maps.ZoomControlStyle.default，
位置：google.maps.ControlPosition.LEFT_底部
}
});
var scriptElement=document.createElement（'script'）；
scriptElement.src=数据\服务\ URL；
document.getElementsByTagName（'head'）[0].appendChild（scriptElement）；
}
函数回调（数据）{
对于（变量i=0；i


谢谢你的帮助
创建全局可访问阵列：

在updateSlider
中，迭代数组并根据比较设置visible属性：
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;
}

函数更新滑动器（slideAmount）{
for（var i=0；i=markers[i].get（'value'）；
}
SlideValue=slideAmount；
document.getElementById（“slidervalue”）.innerHTML=slidervalue；
}

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

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