iT邦幫忙

0

Google Map多標記與滑鼠觸發事件問題

在使用google map api時使用標記並且搭配滑鼠的觸發事件,在製作單一標記與觸發事件時皆無問題,但用一樣的方法套用在多標記當中,標記的傾聽器都沒有被觸發到,請問我是不是哪邊寫錯需要更正的,請高手指點。

單一標記

function initMap() {
        //初始map
        map = new google.maps.Map(document.getElementById('map'), {
            center: myLatLng,
            zoom: 7
        });
        //單一點marker
        var marker = new google.maps.Marker({
           position:locat,
           map:map,
           title:'Test'
        });

        //單一marker滑鼠點擊出現彈跳視窗
        var infowindow = new google.maps.InfoWindow({
            content:st
        });
        marker.addListener('click',function () {
            a = a*-1;
            if(a>0){
                infowindow.open(map,marker);
            }else{
                infowindow.close();
            }
        });

    }

多標記,標記是有出現但傾聽器無反應。

<script>
    var map;
    var mysite = {lat:24.046027, lng:120.687038};
    //控制標記文字出現隱藏
    var a = -1;
    //多標記經緯度
    var markers = new Array();
    var loct = [
        {lat:24.045513,lng:120.685724,label:'資訊工程大樓'},
        {lat:24.046209,lng:120.685504,label:'健康大樓'},
        {lat:24.047110,lng:120.686700,label:'管理學院大樓'},
        {lat:24.045484,lng:120.687269,label:'創設學院大樓'}

    ];

    function initMap() {
        //初始map
        map = new google.maps.Map(document.getElementById('map'), {
            center: mysite,
            zoom: 17
        });
        //多點標記
        for(var i = 0;i<loct.length;i++){
            markers[i] = new google.maps.Marker({
               position:{
                   lat:loct[i].lat,
                   lng:loct[i].lng
               },
               map:map,

            });
            var infowin = new google.maps.InfoWindow({
               content:loct[i].label
            });
            markers[i].addListener('click',function () {
                a = a*-1;
                if(a>0){
                    infowin.open(map,markers[i]);
                }else{
                    infowin.close();
                }
            });
        }
    }

</script>
看更多先前的討論...收起先前的討論...
dragonH iT邦超人 6 級 ‧ 2020-03-27 14:53:31 檢舉
你點看看第一個點或者最後一個點看有沒有反應
都按過了都是沒有反應
listennn08 iT邦研究生 4 級 ‧ 2020-03-27 15:18:53 檢舉
你應該要把 infowin 也弄成陣列吧
在 for 外面 var infowin = [];
for 的 i 用let 定義
infowin[i] = new google.maps.InfoWindow ...
infowin[i].open/close

你判斷開關的 a 也是要用陣列
謝謝您我試試看
listennn08 iT邦研究生 4 級 ‧ 2020-03-27 15:28:11 檢舉
for (let i = 0; i<loct.length;i++)
@listennn08大大我嘗試過了但還是不能
listennn08 iT邦研究生 4 級 ‧ 2020-03-27 15:53:43 檢舉
func ... {
var infowin = new Array();
var a = new Array();

for(let i = 0;i<loct.length;i++) {
/**
省略....
*/
a.push(1);
infowin.push(new google.maps.InfoWindow({
content:loct[i].label
}))
markers[i].addListener('click',function () {
if(a[i]>0){
infowin[i].open(map,markers[i]);
}else{
infowin[i].close();
}
a[i] = a[i]*-1;
});
}
}
我寫的跟您一樣,會變成點只有一個,傾聽器
還是沒有作用
listennn08 iT邦研究生 4 級 ‧ 2020-03-30 08:53:42 檢舉
你把你改的 code 放上來看看
我的code跟你給我的建議是差不多的只
有變數名稱不同而已
後來是這樣解決的
function initMap() {
//初始map
map = new google.maps.Map(document.getElementById('map'), {
center: mysite,
zoom: 17
});
//多點標記
for(var i = 0;i<loct.length;i++){
markers = new google.maps.Marker({
position:{
lat:loct[i].lat,
lng:loct[i].lng
},
map:map,

});
google.maps.event.addListener(markers, 'click', (function(markers, i) {
return function() {
infowin.setContent(loct[i].label);
infowin.open(map, markers);
}
})(markers, i));
}


}
listennn08 iT邦研究生 4 級 ‧ 2020-03-30 16:10:49 檢舉
有解決就好了 不過我想應該是 var 跟 let 的關係

尚未有邦友回答

立即登入回答