Question

首先，我对谷歌地图或Javascript知之甚少，到目前为止我所掌握的大部分内容都是从各种教程中复制粘贴并粘贴在一起的（虽然我明白了什么做了什么）。

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

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

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

我认为这可以使用if else语句和Google map 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>

感谢您的帮助。

Answer 1

创建一个全局可访问的数组：
```
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

遍历数组并根据比较设置visible-property：

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

根据滑块值与数据值进行比较，隐藏/显示谷歌地图标记

1 个答案: