谷歌地圖：mouseout監聽器不能在Wordpress中工作

嘗試在WP中使用Google Maps API v3實現地圖，並且指派給mouseout事件的監聽器無法正常工作。使用的代碼是複製&從另一個網站粘貼工作正常。 funcionality是：鼠標懸停顯示信息窗口和鼠標隱藏它。問題是你翻身的任何標記之後，你甚至不能拖動地圖谷歌地圖：mouseout監聽器不能在Wordpress中工作

精細：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! 
}

來源

2011-04-20 hsands

是infoWin全局定義？如果是這樣，你也應該粘貼這部分代碼。 javascript調試器告訴你什麼？ Firebug/Chrome網絡工具？ – kovshenin 2011-04-21 09:29:46

@kovshenin：是的，infoWin被定義爲全局;我在代碼中添加了變量聲明。問題是var infoWin在文件末尾被重新定義，我猜想是在複製/粘貼操作中。奇怪的是，錯誤不是在純PHP/HTML/JS頁面中觸發的，而是在基於Wordpress的頁面中完成的。我想由於與WP中捆綁的JS庫有些衝突。非常感謝你的幫助！ – hsands 2011-04-21 19:15:06

你可能想要發佈一個作爲答案的獨奏，因爲我沒有真正理解它;） – kovshenin 2011-04-22 06:59:12

該問題是由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! 
}

來源

2011-05-02 19:45:10 hsands

谷歌地圖：mouseout監聽器不能在Wordpress中工作

回答

相關問題