Question

所以我有一张谷歌地图，它提供了大约185个公司地址和来自JSON文件的信息我已经完成了所有工作，但我想要做的是在你＆＃34; tick＆＃34;单选按钮或从选择框中选择一个选项。

这是一个工作的掠夺者 - https://plnkr.co/edit/jHCuVVhGDLwgjNw4bcLr

这是我的地图代码：

var map;

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(58, 16),
        zoom: 2,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}

var seg = {
    1:'invesCastProd',
    2:'forged',
    3: 'airframe',
    5: 'corp',
    6: 'structurals'        
}

var comp = {
    1:'structurals',
    2:'airfoils',
    3: 'airfoils',
    4: 'wyman',
    5: 'energy',
    6: 'strucComp',
    7: 'mechHard',
    8: 'engineProd',
    9: 'corp',
    10: 'aero',
    12: 'timet',
    13: 'specMetals'
}

$.getJSON("locations.json", function(json1) {
  $.each(json1, function(key, data) {
    var latLng = new google.maps.LatLng(data.latitude, data.longitude); 
    // Creating a marker and putting it on the map
    var marker = new google.maps.Marker({
        position: latLng
    });
    marker.setMap(map);

    var infoWindow = new google.maps.InfoWindow();

    google.maps.event.addListener(marker, 'click', function() {

      if (infoWindow) {infoWindow.close();}
      infoWindow = new google.maps.InfoWindow({
        content: "<h5>" + data.display_name + "</h5>" +
        "<div>" + data.street+ "</div>" +
        "<div>" + data.city + ", " + data.state + " &nbsp; " + data.postal_code + "</div>" +
        "<div><strong>" + seg[data.segment_id] + "</strong></div>" +
        "<div><strong>" + comp[data.component_id] + "</strong></div>" +
        "<div class='mapPhoneNum'>" + data.telephone + "</div>" +
        "<a href=" + data.web_url + ">Website</a>"
      });
      infoWindow.open(map, marker);
      map.setZoom(15);
      map.panTo(this.getPosition());

    });

    //############################################
    //       I don't know what to add here
    //############################################
    filterMarkers = function(){

    }

  });

});

// Init map
initialize();

这是HTML：

<div class="mapWrap">
  <div id="map-canvas"></div>
  <div class="investCast">
    <select id="pccLoc" onchange="filterMarkers(this.value);">
    <option selected="selected" disabled="disabled" value="">Please select category</option>
    <option class="optGroup" value="corp">PCC Corporate</option>
    <option class="optGroup" value="invesCastProd">Investment Cast Products</option>
    <option class="optChild" value="structurals"> - PCC Structurals</option>
    <option class="optChild" value="airfoils"> - PCC Airfoils</option>
    <option class="optGroup" value="forged">Forged Products</option>
    <option class="optChild" value="wyman"> - Wyman-Gordon</option>
    <option class="optChild" value="energy"> - PCC Energy Group</option>
    <option class="optChild" value="timet"> - Titanium Metals Corp. (TIMET)</option>
    <option class="optChild" value="specMetals"> - Special Metals Corp. (SMC)</option>
    <option class="optGroup" value="airProd">Airframe Products</option>
    <option class="optChild" value="fasteners"> - PCC Fasteners</option>
    <option class="optChild" value="aero"> - PCC Aerostructures</option>
    </select>
  </div>
</div>

<div class="mapSelWrap">

  <div class="corpSel optGroup"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="corp" /> PCC Corporate Headquarters</div>

  <div class="selInnerWrap">
    <div class="selInner">
      <div class="optGroup"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="invesCastProd" /> Investment Cast Products</div>
      <div class="optChild"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="structurals" /> PCC Structurals</div>
      <div class="optChild"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="airfoils" /> PCC Airfoils</div>
    </div>
  </div>

  <div class="selInnerWrap">
    <div class="selInner">
      <div class="optGroup"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="forged" /> Forged Products</div>
      <div class="optChild"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="wyman" /> Wyman-Gordon</div>
      <div class="optChild"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="energy" /> PCC Energy Group</div>
      <div class="optChild"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="timet" /> Titanium Metals Corp.</div>
      <div class="optChild"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="specMetals" /> Special Metals Corp.</div>
    </div>
  </div>

  <div class="selInnerWrap">
    <div class="selInner">
      <div class="optGroup"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="airframe" /> Airframe Products</div>
      <div class="optChild"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="fasteners" /> PCC Fasteners</div>
      <div class="optChild"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="aero" /> PCC Aerostructures</div>
    </div>
  </div>

</div>

我要做的是创建一个＆＃34; filterMarkers＆＃34;当你选择并选择或勾选一个基于segment_id和component_id过滤引脚的单选按钮时运行的函数（正如你在plunk的JSON文件中看到的只是数字）。

正如您在JavaScript文件中的plunk（https://plnkr.co/edit/jHCuVVhGDLwgjNw4bcLr）中所看到的，我已经使用我的＆＃34;过滤器＆＃创建了两个对象（var = seg {}，var = comp {}） 34;我已经与JSON文件中的数字相匹配。并且它正在工作，因为当您单击某个引脚并弹出信息窗口时，粗体文本是与该位置关联的过滤器。我还相应地将值设置为HTML元素中的过滤器。

那么如何基于对象变量来过滤这些结果呢？我对这个想法很感兴趣，而且代码我只是停留在过滤部分。

我甚至不知道要添加到过滤器功能中的内容：

filterMarkers = function(){

}

感谢您的帮助！

Answer 1

这不是一个容易解释的问题。
不错的项目，顺便说一句。

以下是我从更改顺序your Plunker更改的内容：

我将Google Maps API脚本调用从<head>移至<html>的末尾。
我向其添加了async defer，并将回调从initMap更改为initialize，这就是您为自己的功能命名的方式。
我在您的脚本末尾删除了initialize()电话。它是API回调的工作来触发它。

这修复了控制台中的错误然后，我提出了你的问题。

我在您的第一个广播中添加了一些数据属性...因为您想使用JSON中的component_id和segment_id值进行过滤。

这是：

<div class="corpSel optGroup"><input onclick="filterMarkers($(this));" type="radio" name="loc" value="corp" data-segment_id="2" data-component_id="13"/> PCC Corporate Headquarters</div>

现在，在您的filterMarkers = function(category){中，我们可以检索这些过滤信息。

所以我写了这个函数：

filterMarkers = function(category){
    //console.log(category);

    console.log(category.data());
    var component = category.data("component_id");
    var segment = category.data("segment_id")

    // Clear markers
    setMapOnAll(null);
    //marker = [];
    var filteredMarkers=[];

    $.each(myJSON, function(key, data) {
        //console.log(key);

        if( (myJSON[key].component_id == component) && (myJSON[key].segment_id == segment) ){
            console.log("FOUND");

            filteredMarkers.push(key);
        }
    });

    for(i=0;i<filteredMarkers.length;i++){
        myMarkers[filteredMarkers[i]].setMap(map);
    }
}

function setMapOnAll(map) {
    for (var i = 0; i < myMarkers.length; i++) {
        myMarkers[i].setMap(map);
    }
}

注意：我从API documentation获取了setMapOnAll(map)功能。

所以诀窍是在每个无线电输入点击中从地图中删除所有标记然后，“过滤”循环检查所有json对象以查看过滤条件是否匹配。

创建一个临时数组（filteredMarkers）来保存myMarkers数组已过滤keys并使用它重绘正确的标记。

Updated Plunker

Google地图 - 根据JavaScript对象过滤结果

1 个答案: