Javascript 谷歌地图：鼠标输出侦听器在Wordpress中不工作

试图使用Google Maps API v3在WP中实现映射，但分配给mouseout事件的侦听器出现问题，无法工作。使用的代码是从另一个站点复制粘贴的，工作正常。功能是：mouseover显示信息窗口，mouseout隐藏信息窗口。问题是在你翻过任何标记后，你甚至不能拖动地图

罚款：

header.php

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/common.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
<script type="text/javascript">
    locations = [<?php echo $locations; ?>];
    iwData = [<?php echo $iwData; ?>];
</script>

页面

common.js

var map;  
var myIcon;  
var image;  
var infoWin;  
var markers = new Array();

function sdgCityMap(lat,lng) {
...
    map = new google.maps.Map(document.getElementById("city_canvas"), myOptions);

    function buildOverHandler(i) {
        return function() {showIW(i);};
    }

    function buildClickHandler(i) {
        return function() {lnkToStore(i);};
    }

    for (i in locations) {
        myIcon = (locations[i][0] == 1) ? "http://www.fashiontraveler.com/newsite/media/imgs/maps/mono_store.png" : "http://www.fashiontraveler.com/newsite/media/imgs/maps/multi_store.png";
        image = new google.maps.MarkerImage(myIcon, new google.maps.Size(45,22));
        coords[i] = new google.maps.LatLng(locations[i][2],locations[i][3]);
        markers[i] = new google.maps.Marker({position:coords[i], map:map, icon:image});
        google.maps.event.addListener(markers[i], 'mouseover', buildOverHandler(i));
        google.maps.event.addListener(markers[i], 'mouseout', function(event) {infoWin.close();});
        google.maps.event.addListener(markers[i], 'click', buildClickHandler(i));
    }
    centerZoomMap();
}

function showIW(i) {
    var contentString = '<div id="shopDataMap"><p><span class="VB11435E89">'+locations[i][1]+'</span></p>'+iwData[i]+'</div>';
    infoWin = new google.maps.InfoWindow({content:contentString});
    infoWin.open(map, markers[i]);
}
...
//var infoWin; var redefinition caused the problem!
}

---

这个问题是由于var infoWin在文件的开头和结尾被定义了两次；我猜是在复制/粘贴操作中

var map;  
var myIcon;  
var image;  
var infoWin;  
var markers = new Array();

function sdgCityMap(lat,lng) {
...
}

function showIW(i) {
    var contentString = '<div id="shopDataMap"><p><span class="VB11435E89">'+locations[i][1]+'</span></p>'+iwData[i]+'</div>';
    infoWin = new google.maps.InfoWindow({content:contentString});
    infoWin.open(map, markers[i]);
}
...
//var infoWin; var redefinition caused the problem!
}

---

infoWin是全球定义的吗？如果是这样，您也应该粘贴代码的这一部分。javascript调试器告诉你什么了吗？Firebug/Chrome网络工具？@kovshenin：是的，infoWin的定义是全球性的；我在代码中添加了vars声明。问题是var infoWin是在文件末尾重新定义的，我猜是在复制/粘贴操作中。奇怪的是，这个错误不是在纯PHP/HTML/JS页面中触发的，而是在基于Wordpress的页面中触发的。我想这是因为与WP中捆绑的JS库有一些冲突。非常感谢你的帮助！你可能想发布一条孤独的消息作为回答，因为我并没有真正理解它；

var map;  
var myIcon;  
var image;  
var infoWin;  
var markers = new Array();

function sdgCityMap(lat,lng) {
...
}

function showIW(i) {
    var contentString = '<div id="shopDataMap"><p><span class="VB11435E89">'+locations[i][1]+'</span></p>'+iwData[i]+'</div>';
    infoWin = new google.maps.InfoWindow({content:contentString});
    infoWin.open(map, markers[i]);
}
...
//var infoWin; var redefinition caused the problem!
}