javascript - Google map - 基于 JavaScript 对象过滤结果

Question

所以我有一个谷歌地图，它从一个 JSON 文件中提取大约 185 个公司地址和信息，我已经完成了所有工作，但我想做的是当您“勾选”单选按钮或选择一个时过滤结果选择框中的选项。

这是一个正在工作的笨蛋 - https://plnkr.co/edit/jHCuVVhGDLwgjNw4bcLr

这是我的 map 代码:

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>

我想做的是创建一个“filterMarkers”函数，当您选择并选择或勾选一个单选按钮时运行，该按钮根据segment_id和component_id(它们只是您在JSON文件中看到的数字)过滤引脚的 plunk)。

正如您在 JavaScript 文件中的 plunk ( https://plnkr.co/edit/jHCuVVhGDLwgjNw4bcLr ) 中看到的那样，我使用我匹配的“过滤器”创建了两个对象 ( var = seg{ }, var = comp{ } )与 JSON 文件中的数字。它之所以有效，是因为当您单击图钉并且弹出信息窗口时，粗体文本是与该位置关联的过滤器。我还根据 HTML 元素中的过滤器设置了相应的值。

那么我现在如何根据对象变量过滤这些结果呢？我对这个想法和代码还很遥远，我只是停留在过滤部分。

我什至不知道要在过滤器函数中添加什么:

filterMarkers = function(){

}

感谢您的帮助!

Answer 1

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

这是我从 your Plunker 更改的内容，按更改顺序:

1. 我将 Google map API 脚本调用从 <head> 移至到<html>结束.
2. 我添加了async defer并将回调从 initMap 更改为至initialize ，这就是您命名函数的方式。
3. 我删除了您的initialize()在脚本末尾调用。 API 回调的工作就是触发它。

这修复了控制台中的错误。
然后，我开始回答你的问题。

我向您的第一个 radio 添加了一些数据属性...因为您想使用 component_id 进行过滤和segment_id来自 JSON 的值。

这里是:

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

注意:我选择了 setMapOnAll(map)来自 API documentation 的函数.

所以技巧是在每次单选输入点击时从 map 上删除所有标记。
然后，“过滤”循环检查所有 json 对象以查看过滤条件是否匹配。

创建一个临时数组( filteredMarkers )来保存 myMarkers过滤数组keys并用它重新绘制正确的标记。

Updated Plunker