当发生两件事时,我需要这张 map 缩小到“2”:
- 当您关闭信息窗口时
- 当您单击另一个单选按钮时
我尝试了一些方法,但似乎没有效果。
这是我的代码:
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 + " " + 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);
}
}
});
});
实现这一目标的最佳方法是什么?
最佳答案
关闭 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
关于javascript - Google map - 当信息窗口关闭或其他单选按钮过滤器为 "ticked"时缩小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40408317/