Question

我需要这张地图缩小到＆＃34; 2＆＃34;当两件事发生时：

关闭信息窗口时
当您点击另一个单选按钮

我尝试过一些东西，但似乎没什么用。

这是我的代码：

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'

}

var myJSON = {};
var myMarkers=[];

$.getJSON("locations.json", function(json1) {
  myJSON=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
    });
    myMarkers[key]=marker;
    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 class='mapPhoneNum'>" + data.telephone + "</div>" +
        "<div><strong>" + seg[data.segment_id] + "</strong></div>" +
        "<div><strong>" + comp[data.component_id] + "</strong></div>" +
        "<a href=" + data.web_url + ">Website</a>"
      });
      infoWindow.open(map, marker);
      map.setZoom(15);
      map.panTo(this.getPosition());

    });

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

}）;

实现这一目标的最佳方法是什么？

Answer 1

关闭InfoWindow是个问题。

你需要一个事件监听器。

只需在“标记点击”听众中添加此内容：
（google.maps.event.addListener(marker, 'click', function() {） - script.js的第55行。

google.maps.event.addListener(infoWindow,'closeclick',function(){
    console.log("CLOSE");
    map.setZoom(2);
    map.setCenter({lat:58,lng:16});
});

我知道将监听器添加到监听器听起来很奇怪但那就是你定义infoWindow ...的地方 ;）
它有效！

的修改
（我没有处理上面的第二个请求......）

所以，必须将上述内容转移到一个函数中：

function resetMapOrigin(){
    console.log("Reseting Map.");
    map.setZoom(2);
    map.setCenter({lat:58,lng:16});
}

然后在需要时调用此“重置”功能。
;）

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

：

google.maps.event.addListener(infoWindow,'closeclick',function(){
    resetMapOrigin();    // See Plunker line #72
});

并在filterMarkers = function(category){之后，setMapOnAll(null);之后：

resetMapOrigin();    // See Plunker line #90

Updated Plunker

谷歌地图 - 当信息窗口关闭或其他单选按钮过滤器被勾选时，缩小＆＃34;

1 个答案: