Google 地图：mouseout 侦听器在 Wordpress 中不起作用

Question

尝试使用 Google Maps API v3 在 WP 中实现地图，但分配给 mouseout 事件的侦听器不起作用。使用的代码是副本 &从另一个网站粘贴工作正常。其功能是：鼠标悬停显示信息窗口，鼠标悬停隐藏信息窗口。问题是，在您滚动任何标记后，您甚至无法拖动地图

精细： http://www.fashiontraveler.com/shanghai-shopping-guide-map.htm

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>

页面

<div id="city_canvas" style="margin-top:40px; width:500px; height:300px; border:solid 1px #000;"><script>window.onload = function() {sdgCityMap(<?php echo $cityCoord; ?>);}</script></div>

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!
}

Answer 1

该问题是由于 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!
}