谷歌地图监听事件就像即使它是一个鼠标悬停

我加入这两个google.maps.event.addListener事件谷歌地图监听事件就像即使它是一个鼠标悬停

google.maps.event.addListener(markerAcademicCenter, "mouseover", function (e) { 
    markerIconAcademicCenter.url = 'MapIcons/Circle32.png' 
}); 
google.maps.event.addListener(markerAcademicCenter, "mouseout", function (e) { 
    markerIconAcademicCenter.url = 'MapIcons/Circle64.png' 
});

这个标记已经有一个click事件下方点击。

google.maps.event.addListener(markerAcademicCenter, "click", function (e) { 
    $(".campusMapInfoPanel > div").appendTo($(".InfoStorageDiv")); 
    $(".InfoPanelAcademicCenter").appendTo($(".campusMapInfoPanel")); 
    this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1); 
    setZoomWhenMarkerClicked(); 
    CampusMap.setCenter(markerAcademicCenter.getPosition()); 
});

markerIconAcademicCenter.url已经在这些事件之上设置为Circle64。我希望页面能够加载更大的圆圈 - 64x64 - 在我悬停并离开标记区域时来回切换。我有这个

没有两个问题

发生在我将鼠标放置的标志物，但是当我点击它发生。在页面加载后的初始点击中，地图缩放并在建筑物中心和标记图像调整大小。如果我再次点击该建筑物，则没有其他发生，但是：
如果我点击触发点击事件的菜单链接，function buildingFocus(markerName) {google.maps.event.trigger(markerName, "click");}该功能会重置图标，就好像它是鼠标事件一样。

为了进一步测试这种意外的行为，我一次一个注释掉每个事件。为了澄清事实上正在发生，我首先将初始图像更改为clear.png。

当我拿出鼠标悬停事件时，当我单击建筑事件或菜单链接作为我加载页面后的第一次点击时，图像没有改变。在我删除鼠标悬停事件之前，单击菜单作为我的第二次点击后，页面加载将图标更改为鼠标图像，但现在点击建筑物导致这一点。

当我拿出鼠标悬停事件时，点击建筑物作为第一次点击使图标变成鼠标悬停图像，然后再次点击任何区域都没有做任何进一步处理。如果我点击菜单链接作为第一次或以后的点击，图片没有改变，但只要我点击了建筑物就可以了。

当我将点击事件取出时，图像从未改变。就其本身而言，点击事件在两个位置都按预期工作。

来源

2014-07-15 AQiccl135

，什么是'markerIconAcademicCenter'？ –

它是一个包含的URL，大小，来源和锚的学术中心的标记信息的对象。 – AQiccl135

标记的图标不是MVCObject，API不会观察图标属性的更改。

您必须修改图标的url，然后调用setIcon以应用更改：

google.maps.event.addListener(markerAcademicCenter, "mouseover", function (e) { 
    var icon = this.getIcon(); 
    icon.url = 'url/to/icon'; 
    this.setIcon(icon); 
});

但我不会建议它，当你使用多个标记改变url的图标（或其他属性）会影响原始图标markerIconAcademicCenter（标记使用对原始对象的引用）。你最好用修改URL创建一个副本：

google.maps.event.addListener(markerAcademicCenter, "mouseover", function (e) { 
    var icon = this.getIcon(),copy={}; 
    for(var k in icon){ 
     copy[k]=icon[k]; 
    } 
    copy.url= 'url/to/icon';  
    this.setIcon(copy); 
});

来源

2014-07-15 20:19:29

啊。你是否从经验中知道，或者有什么地方可以去研究为什么以及何时在其他地方使用这种技术？第二个问题，只有当我将鼠标悬停在建筑物上，而不是菜单链接时，这才起作用。编辑：没关系。我知道了。 – AQiccl135

哪种技术？ –

使用副本而不是真实的技术。我唯一一次使用类似的东西是在课堂上通过价值传递和传递指针。 – AQiccl135

尝试使用这样的：

google.maps.event.addListener(markerAcademicCenter, "mouseover", function (e) { 
    markerIconAcademicCenter.setIcon('url to icon'); 
});

，而不是下面的代码：

google.maps.event.addListener(markerAcademicCenter, "mouseover", function (e) { 
    markerIconAcademicCenter.url = 'MapIcons/Circle32.png' 
});

这将解决你的图标大小变化的问题上鼠标悬停及移出的问题。

来源

2014-07-15 19:37:33 Mayank

如果我正在阅读此权限，您认为我不希望大小改变？ – AQiccl135

这不仅改变大小，如果使用不同比例尺的相同的图标就会出现有规模正在改变，但是这是用来只是改变应用的事件的图标。 – Mayank

对不起，我还是不明白这个好处。你能举一个详细的例子吗？ – AQiccl135

您可以检查下面的代码，这样你就会清楚我的意思是说：

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps JavaScript API v3 Example: Map Simple</title> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places"></script> 
<script type="text/javascript"> 

    var map, places, iw; 
    var markers = []; 
    var autocomplete; 
    var options = { 
     //types: ['(cities)'], 
     //componentRestrictions: {country: 'us'} 
    }; 
    var geocoder = new google.maps.Geocoder(); 
    function initialize() { 
    var myLatlng = new google.maps.LatLng(37.783259, -122.402708); 
    var myOptions = { 
     zoom: 12, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    places = new google.maps.places.PlacesService(map); 
    google.maps.event.addListener(map, 'tilesloaded', tilesLoaded); 
    autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), options); 
    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
     showSelectedPlace(); 
    }); 
    } 

    function tilesLoaded() { 
    google.maps.event.clearListeners(map, 'tilesloaded'); 
    google.maps.event.addListener(map, 'zoom_changed', search); 
    google.maps.event.addListener(map, 'dragend', search); 
    search(); 
    } 

    function showSelectedPlace() { 
    clearResults(); 
    clearMarkers(); 
    var place = autocomplete.getPlace(); 
    map.panTo(place.geometry.location); 
    markers[0] = new google.maps.Marker({ 
     position: place.geometry.location, 
     map: map 
    }); 
    iw = new google.maps.InfoWindow({ 
     content: getIWContent(place) 
    }); 
    iw.open(map, markers[0]); 
    search(); 
    } 

    function search() { 
    var type; 
    for (var i = 0; i < document.controls.type.length; i++) { 
     if (document.controls.type[i].checked) { 
     type = document.controls.type[i].value; 
     } 
    } 

    autocomplete.setBounds(map.getBounds()); 

    var search = { 
     bounds: map.getBounds() 
    }; 

    if (type != 'establishment') { 
     search.types = [ type ]; 
    } 

    places.search(search, function(results, status) { 
     if (status == google.maps.places.PlacesServiceStatus.OK) { 
     clearResults(); 
     clearMarkers(); 
     for (var i = 0; i < 9; i++) { 
      markers[i] = new google.maps.Marker({ 
      position: results[i].geometry.location, 
      animation: google.maps.Animation.DROP 
      }); 

      google.maps.event.addListener(markers[i], 'mouseover', animate(i)); 
      google.maps.event.addListener(markers[i], 'mouseout', reanimate(i)); 
      google.maps.event.addListener(markers[i], 'click', getDetails(results[i], i)); 
      setTimeout(dropMarker(i), i * 100); 
      //addResult(results[i], i); 
      mygetDetails(results[i], i); 
     } 
     } 
    }) 
    } 

    function clearMarkers() { 
    for (var i = 0; i < markers.length; i++) { 
     if (markers[i]) { 
     markers[i].setMap(null); 
     markers[i] == null; 
     } 
    } 
    } 

    function dropMarker(i) { 
    return function() { 
     markers[i].setMap(map); 
    } 
    } 

    //Function to animate markers on there hover 
    function animate(locationCount){ 
     return function(){ 
      markers[locationCount].setIcon('https://mts.googleapis.com/vt/icon/name=icons/spotlight/spotlight-poi.png&scale=2'); 
      $("#addressSpan"+locationCount).css('font-weight', '700'); 
      $("#addressSpan"+locationCount).css('color', '#ff0000'); 
     } 
    } 

    //Function to remove animation of markers on there hover 
    function reanimate(locationCount){ 
     return function(){ 
      markers[locationCount].setIcon('https://mts.googleapis.com/vt/icon/name=icons/spotlight/spotlight-poi.png&scale=1'); 
      $("#addressSpan"+locationCount).css('font-weight', ''); 
      $("#addressSpan"+locationCount).css('color', ''); 
     } 
    } 

    function addResult(result, i) { 

    if(i<=9){ 
     var results = document.getElementById("results"); 
     var tr = document.createElement('tr'); 
     tr.style.backgroundColor = (i% 2 == 0 ? '#F0F0F0' : '#FFFFFF'); 
     tr.click = function() { 
     google.maps.event.trigger(markers[i], 'click'); 
     }; 

     var iconTd = document.createElement('td'); 
     var nameTd = document.createElement('td'); 
     var addressTd = document.createElement('td'); 
     var icon = document.createElement('img'); 
     icon.src = result.icon; 
     icon.setAttribute("class", "placeIcon"); 
     icon.setAttribute("className", "placeIcon"); 
     var name = document.createTextNode(result.name); 
     var address = document.createTextNode(result.formatted_address); 

     iconTd.appendChild(icon); 
     nameTd.appendChild(name); 
     addressTd.appendChild(address); 
     tr.appendChild(iconTd); 
     tr.appendChild(nameTd); 
     tr.appendChild(addressTd); 
     results.appendChild(tr); 
    } 
    } 

    function clearResults() { 
    var results = document.getElementById("results"); 
    while (results.childNodes[0]) { 
     results.removeChild(results.childNodes[0]); 
    } 
    } 

    function clearResults1() { 
    var results = document.getElementById("results1"); 
    while (results.childNodes[0]) { 
     results.removeChild(results.childNodes[0]); 
    } 
    } 

    function getDetails(result, i) { 
    return function() { 
     places.getDetails({ 
      reference: result.reference 
     }, showInfoWindow(i)); 
    } 
    } 

    function mygetDetails(result, i) { 
    return places.getDetails({ 
      reference: result.reference 
     }, function(place, status){ 
      if (status == google.maps.places.PlacesServiceStatus.OK) { 
       addResult(place, i); 
      } 
     }); 
    } 

    function showInfoWindow(i) { 
    return function(place, status) { 
     if (iw) { 
     iw.close(); 
     iw = null; 
     } 

     if (status == google.maps.places.PlacesServiceStatus.OK) { 
     iw = new google.maps.InfoWindow({ 
      content: getIWContent(place) 
     }); 
     iw.open(map, markers[i]);   
     } 
    } 
    } 

    function getIWContent(place) { 
    var content = ""; 
    content += '<table><tr><td>'; 
    content += '<img class="placeIcon" src="' + place.icon + '"/></td>'; 
    content += '<td><b><a href="' + place.url + '">' + place.name + '</a></b>'; 
    content += '</td></tr></table>'; 
    return content; 
    } 

    $(function(){ 
     $("#autocomplete").keyup(function(){ 
      clearResults1(); 
      geocoder.geocode({"address": $(this).val()}, function(data, status) { 
       if (status == google.maps.GeocoderStatus.OK) { 
        $.each(data, function(int_index,value) { 
         var results = document.getElementById("results1"); 
         var tr = document.createElement('tr'); 
         tr.style.backgroundColor = (int_index% 2 == 0 ? '#F0F0F0' : '#FFFFFF'); 
         var nameTd = document.createElement('td'); 
         var name = document.createTextNode(value.formatted_address); 
         nameTd.appendChild(name); 
         tr.appendChild(nameTd); 
         results.appendChild(tr); 
        }); 
       } 
      }); 
     }); 
    }); 
</script> 
<style> 
body { 
    font-family: sans-serif; 
} 
#map_canvas { 
    position: absolute; 
    width: 399px; 
    height: 399px; 
    top: 25px; 
    left: 0px; 
    border: 1px solid grey; 
} 
#listing { 
    position: absolute; 
    width: 200px; 
    height: 360px; 
    overflow: auto; 
    left: 401px; 
    top: 65px; 
    cursor: pointer; 
} 
#listing1 { 
    position: absolute; 
    width: 200px; 
    height: 360px; 
    overflow: auto; 
    left: 601px; 
    top: 65px; 
    cursor: pointer; 
} 
#controls { 
    width: 200px; 
    position: absolute; 
    top: 0px; 
    left: 400px; 
    height: 60px; 
    padding: 5px; 
    font-size: 12px; 
} 
.placeIcon { 
    width: 16px; 
    height: 16px; 
    margin: 2px; 
} 
#resultsTable, #resultsTable1{ 
    font-size: 10px; 
    border-collapse: collapse; 
} 
#locationField { 
    width: 400px; 
    height: 25px; 
    top: 0px; 
    left: 0px; 
    position: absolute; 
} 
#autocomplete { 
    width: 400px; 
} 
</style> 
</head> 
<body style="margin:0px; padding:0px;" onLoad="initialize()"> 
    <div id="locationField"> 
    <input id="autocomplete" type="text" /> 
    </div> 
    <div id="controls"> 
    <form name="controls"> 
    <input type="radio" name="type" value="establishment" onClick="search()" checked="checked"/>All<br/> 
    <input type="radio" name="type" value="restaurant" onClick="search()" />Restaurants<br/> 
    <input type="radio" name="type" value="lodging" onClick="search()" />Lodging 
    </form> 
    </div> 
    <div id="map_canvas"></div> 
    <div id="listing"><table id="resultsTable"><tr><td><h3>Suggested<br>Locations</h3></td></tr><tbody id="results"></tbody></table></div> 
    <div id="listing1"><table id="resultsTable1"><tr><td><h3>Suggested<br>Address</h3></td></tr><tbody id="results1"></tbody></table></div> 
</body> 
</html>

这是一个工作的例子。

来源

2014-07-15 20:32:32 Mayank

谢谢你的努力。我问的时候肯定比较详细，但它太复杂了。根据我的经验辅导大学生，最好尽可能简单地说明解释。（见上面Dr.Molle的回答） – AQiccl135

谷歌地图监听事件就像即使它是一个鼠标悬停

回答

相关问题