GoogleMaps API V3 : 마커의 마우스 핫 스폿 영역이 이동되었습니다.

표준 Google 핀 대신 개별 이미지가있는 마커가 포함 된 googlemap을 만들려고합니다. 이미지는 14 x 14 픽셀 GIF입니다. 이미지를 클릭하면 작은 정보 창이 나타납니다.GoogleMaps API V3 : 마커의 마우스 핫 스폿 영역이 이동되었습니다.

GIF와 HTML 파일은 모두 로컬 디렉토리에 저장됩니다.

내 코드는 한 가지를 제외하고는 정상적으로 작동합니다. 마우스로 클릭 할 수있는 "핫 스폿"영역은 GIF 자체에 있지 않습니다. 대신 GIF 바로 위에있는 정사각형입니다 - 핫 스폿 영역의 오른쪽 아래 모서리는 GIF의 왼쪽 위 모서리에 있습니다. 따라서 infowindow를 표시하려면 GIF가 아닌 GIF 위에 왼쪽을 클릭해야합니다.

V2- 맵에서이 효과를 보지 못했습니다. 저는 이미 이미지 객체의 크기, 원점 및 앵커 매개 변수를 속이고 있었지만 아무 소용이 없었습니다. 앵커 매개 변수는 이미지 위치를 이동하지만 클릭 가능 영역도 이동합니다. 크기 매개 변수는 GIF 자체보다 작 으면 효과 만 있습니다. 그런 다음 GIF의 가장자리를 자릅니다. 또한 origin 매개 변수를 사용하면 GIF가 재미있어 보일 수 있습니다.

도움이 될만한 아이디어가 있습니까? 다음은 내가 사용하는 코드입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title>GMaps V3</title> 
    <style type="text/css" media="screen"> 
* { FONT-FAMILY: Arial,sans-serif; FONT-SIZE: 12px; margin: 0.2em; } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&key=" type="text/javascript" ></script> 
    <script type="text/javascript"> 
    //<![CDATA[ 
    function load() { 

     var center_of_map = new google.maps.LatLng(50.0, 11.0); 
     var marker_pos = new google.maps.LatLng(50.03, 10.98); 
     var mapOptions = { zoom: 10, center: center_of_map }; 
     var map = new google.maps.Map(document.getElementById("map"), mapOptions); 

     var image = { 
     url: 'bridge.gif', 
     size: new google.maps.Size(14, 14), 
     origin: new google.maps.Point(0,0), 
     anchor: new google.maps.Point(0, 0) 
     } 

     var markerProperties = { 
      map: map, 
      title: "Click me!", 
      icon: image, 
      position: marker_pos 
      }; 

     var marker = new google.maps.Marker(markerProperties); 

     var myInfo = new google.maps.InfoWindow(
     { content: "This is an information window" } 
    ); 

     google.maps.event.addListener(
     marker, 'click', function() { 
      myInfo.open(map, marker); 
     } 
    ); 

    } //load 
     //]]> 
    </script> 
    </head> 
    <body onload="load()"> 
    <table border="1"> 
     <tr><td><b>This is our map</b></td></tr> 
     <tr><td><div id="map" style="width: 400px; height: 300px"></div></td><tr> 
    </table> 
    </body> 
</html>

출처

2015-01-14 Ralf Zwanziger

좋아요, 포함 된 스타일과 관련이있는 것으로 보입니다. 줄을 주석 처리하면 효과가 더 이상 보이지 않고 모든 것이 그대로 유지됩니다. 이상한!

출처

2015-01-15 07:19:02

나는 동일한 문제가있었습니다. 내 경우에는 수정 같은 몸에 클래스를 추가했다 :

body.no-zoom { 
    zoom: 1; 
}

하지만, 내 경우에는 맵이 몸의 직접적인 자식 DIV 노드이었다.

<body class="no-zoom"> 
    <div id="map-canvas"> 
    </div> 
</body>

출처

2015-10-04 19:43:51

GoogleMaps API V3 : 마커의 마우스 핫 스폿 영역이 이동되었습니다.

답변

관련 문제