清除/删除Google地图Infobox（自定义InfoWindow）问题 [英] Issue on Clearing/ Removing Google Maps Infobox (Custom InfoWindow)
本文介绍了清除/删除Google地图Infobox（自定义InfoWindow）问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
你可以看看这个演示，并让我知道为什么我不能：
1-当打开一个新的信息框时关闭任何打开的信息框
2-清除/删除打开的信息框当用户点击清除按钮？
以下是我的代码
$（document）.ready（function（）{
var markers = []; //制造商数组
var infoBox = null;
var myOptions = {//地图设置
zoom：15，
center：new google.maps.LatLng（38.721759，-9.151692），
mapTypeId：google.maps.MapTypeId.ROADMAP，
sensor：'true'
var map = new google.maps.Map（document.getElementById（canvas-map），myOptions）;
var data = [//地图数据
{
id：1，
content：'< div class =img>< / div>< div class =txt>< h1> THIT TITLE< h1>< span> Sed posuere conse在lobortis的ctetur est。 Donec sed odio dui。 Donec sed odio dui。 Aenean eu leo quam。< / span>< / div>< div class =fot>< / div>'，
位置：{
lat：38.721759，
lng：-9.151692
}
}，
{
id：2，
content：'< div class =img>< / div> < div class =txt>< h1> THIS TITLE< / h1>< span>这是一项测试。< / span>< / div>< div class =fot> < / div>'，
位置：{
lat：38.720805，
lng：-9.146585
}
}
]
for（var i = 0; i< data.length; i ++）{
var current = data [i];
var marker = new google.maps.Marker（{
position：new google.maps.LatLng（current.position.lat，current.position.lng），
map ：map，
content：current.content
}）;
markers.push（marker）;
google.maps.event.addListener（markers [i]，click，function（e）{
infoBox = new InfoBox（{
latlng：this.getPosition（ ），
map：map，
content：this.content
}）;
}）;
函数clearMap（）{
for（i = 0; i< markers.length; i ++）{
markers [i]。的setMap（NULL）;
}
markers = [];
infoBox.close（）; （）;
$（＃clear）。on（click，function（）{
clearMap（）;
}）;
}）;
正如您所看到的，我已经尝试过了
infoBox.close（）;
我得到 Uncaught TypeError：undefined不是函数 for .close（）我也尝试了 .remove（），它从地图中删除信息框但当放大或缩小框再次出现在地图上！
为关闭现有的信息框，我也试过了
if（infoBox）{
infoBox.close（）;
}
，但它并没有完成这项工作！ p>
google.maps.event.addListener（markers [i]，click，function（e）{
if（ infoBox）{
infoBox.close（）;
}
infoBox = new InfoBox（{
latlng：this.getPosition（），
map：map，
content：this.content
}）;
}）;
}
谢谢，
解决方案
- 您的infoBox没有.close（）方法，请使用.setMap（null）。如果你只想要一个InfoBox，只需要创建一个（第一次打开它，因为它需要一个latlng），并将它移动到合适的标记。需要编写一个方法来移动信息框
单击侦听器以移动信息框：
google.maps.event.addListener（markers [i]，click，function（e）{
if（！infoBox）{
infoBox = new InfoBox（{
latlng：this.getPosition（），
map：map，
content：this.content
} ）;
} else {
infoBox.setOptions（{
map：map，
content：this.content
}）;
infoBox.setPosition（ this.getPosition（））;
}
}）;
/ *移动InfoBox
* /
InfoBox.prototype.setPosition = function（latlng）{
this.latlng_ = latlng;
};
Can you please take a look at This Demo and let me know why I am not able:
1- To close any open infoBox when a new one opens
2- Clear/ Remove open infoBox when user clicks on Clear button?
Here is the code I have
$(document).ready(function() {
var markers = []; // makers array
var infoBox = null;
var myOptions = { // map settings
zoom: 15,
center: new google.maps.LatLng(38.721759, -9.151692),
mapTypeId: google.maps.MapTypeId.ROADMAP,
sensor: 'true'
}
var map = new google.maps.Map(document.getElementById("canvas-map"), myOptions);
var data = [ // map data
{
id: 1,
content: '<div class="img"></div><div class="txt"><h1>THIS TITLE</h1><span>Sed posuere consectetur est at lobortis. Donec sed odio dui. Donec sed odio dui. Aenean eu leo quam.</span></div><div class="fot"></div>',
position: {
lat: 38.721759,
lng: -9.151692
}
},
{
id: 2,
content: '<div class="img"></div><div class="txt"><h1>THIS TITLE</h1><span>This is a test.</span></div><div class="fot"></div>',
position: {
lat: 38.720805,
lng: -9.146585
}
}
]
for (var i = 0; i < data.length; i++) {
var current = data[i];
var marker = new google.maps.Marker({
position: new google.maps.LatLng(current.position.lat, current.position.lng),
map: map,
content: current.content
});
markers.push(marker);
google.maps.event.addListener(markers[i], "click", function(e) {
infoBox = new InfoBox({
latlng: this.getPosition(),
map: map,
content: this.content
});
});
}
function clearMap(){
for(i=0; i<markers.length; i++){
markers[i].setMap(null);
}
markers = [];
infoBox.close();
}
$("#clear").on("click",function(){
clearMap();
});
});
As you can see I already tried
infoBox.close();
which I am getting Uncaught TypeError: undefined is not a function for .close() I also tried the .remove() which removes the info box from map but when zoom in or out the box appears again at the map!
for closing the existing infobox also I tried the
if (infoBox) {
infoBox.close();
}
in the following cod but it didn't do the job either!
google.maps.event.addListener(markers[i], "click", function(e) {
if (infoBox) {
infoBox.close();
}
infoBox = new InfoBox({
latlng: this.getPosition(),
map: map,
content: this.content
});
});
}
Thanks,
解决方案
- Your infoBox doesn't have a .close() method, use .setMap(null) instead.
- If you want to only have one InfoBox, only create one (the first time it is opened, as it needs a latlng), and move it to the appropriate marker. Requires writing a method to "move" the InfoBox
click listener that "moves" the InfoBox:
google.maps.event.addListener(markers[i], "click", function (e) {
if (!infoBox) {
infoBox = new InfoBox({
latlng: this.getPosition(),
map: map,
content: this.content
});
} else {
infoBox.setOptions({
map: map,
content: this.content
});
infoBox.setPosition(this.getPosition());
}
});
/* move the InfoBox
*/
InfoBox.prototype.setPosition = function(latlng) {
this.latlng_ = latlng;
};
这篇关于清除/删除Google地图Infobox（自定义InfoWindow）问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
