堆棧內存溢出
  簡體   English   中英

即使鼠標懸停在Google Maps偵聽器事件上，其行為也類似於單擊

[英]Google maps listener event acts like a click even though it is a mouseover

 原文  2014-07-15 19:19:28  1   3    javascript/ jquery/ google-maps-api-3

問題描述

我正在添加這兩個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'
});

在已經具有點擊事件的標記下方。 

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）加載，當我將鼠標懸停並離開標記區域時會來回切換。

我有兩個問題

  1. 當我將鼠標懸停在標記上時，什么也沒有發生，但是當我單擊鼠標時，它沒有發生。 頁面加載后的初次單擊時，地圖將縮放並以建築物為中心，並且標記圖像會調整大小。 如果我再次單擊該建築物，則什么也沒有發生， 但是：
  2. 如果我單擊觸發單擊事件的菜單鏈接，則function buildingFocus(markerName) {google.maps.event.trigger(markerName, "click");}會重置圖標，就好像它是mouseout事件一樣。

為了進一步測試這種意外行為，我一次注釋了每個事件。 為了弄清楚實際上正在發生什么，我首先將初始圖像更改為clear.png。

當我取出mouseover事件時，在頁面加載后我第一次單擊建築事件或菜單鏈接時，圖像沒有改變。 在刪除mouseover事件之前，單擊菜單作為頁面加載后的第二次單擊，將圖標更改為mouseout圖像，但是現在單擊建築物會導致這種情況。

當我拿出mouseout事件時，單擊建築物是第一次將鼠標圖標更改為鼠標懸停圖像，然后再次單擊任一區域則沒有任何作用。 如果在第一次或以后單擊時單擊菜單鏈接，則圖像沒有變化，但是單擊建築物后，圖像就發生了變化。

當我取出click事件時，圖像從未改變。 就其本身而言，click事件在兩個位置都可以正常工作。

3 個解決方案

解決方案1
 0  2014-07-15 19:37:33

嘗試使用這個： 

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'
});

這樣可以解決鼠標懸停和鼠標懸停時圖標大小更改的問題。

解決方案2
 0 已采納  2014-07-15 20:19:29

標記的圖標不是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 （標記使用對原始對象的引用）。 您最好使用修改后的網址創建一個副本： 

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);
});

解決方案3
 0  2014-07-15 20:32:32

您可以檢查下面的代碼，以便您清楚我的意思： 

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

這是一個有效的例子。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 事件偵聽器 - 單擊和鼠標懸停？ Google Maps API-單擊事件不起作用，鼠標懸停起作用嗎？ 右鍵單擊就像在事件上單擊鼠標左鍵 Google Maps標記點擊監聽器 Google Maps事件監聽器jQuery 谷歌地圖事件監聽器 dragend 鼠標懸停時附加事件偵聽器 am5charts 地圖中的點擊事件監聽器 Google Maps單擊任何內容，但RichMarker偵聽器 在Google Maps API中使用事件偵聽器，當我單擊時沒有任何反應
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM