Google Maps API V3：移动标记的鼠标热点区域答案

【问题标题】：GoogleMaps API V3: Mouse hot spot area of marker is shiftedGoogle Maps API V3：移动标记的鼠标热点区域
【发布时间】：2015-01-14 11:09:30
【问题描述】：

我正在尝试创建一个 googlemap，其中包含带有单个图像的标记，而不是标准的 google pin。该图像是 14 x 14 像素的 GIF。点击图片，会出现一个小的信息窗口。

GIF 和 HTML 文件都存储在本地目录中。

我的代码工作正常，除了一件事：可用鼠标点击的“热点”区域并不位于 GIF 本身上。相反，它是一个位于 GIF 左上方的正方形 - 热点区域的右下角位于 GIF 的左上角。因此，如果我想要显示信息窗口，我必须单击 GIF 上方的左侧，而不是 GIF。

我还没有在我的 V2 地图上看到这种效果。我已经在玩弄图像对象的参数大小、原点和锚点，但无济于事。锚参数只是移动了图像的位置，但它也移动了可点击区域。 size 参数只有在小于 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>

【问题讨论】：

标签： marker area

【解决方案1】：

好吧，看来和包含的样式有关。如果我注释掉这些行，效果将不再可见，一切都应如此。好笑！

【讨论】：

【解决方案2】：

我遇到了同样的问题。在我的情况下，解决方法是向正文添加一个类：

body.no-zoom {
    zoom: 1;
}

但是，在我的例子中，地图是 body 的直接子 div 节点。

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

【讨论】：