谷歌地图API V3:标记的鼠标热点区域移动

我正在尝试创建一个谷歌地图，其中包含一个带有单个图像的标记，而不是标准的谷歌图钉。该图像是 14 x 14 像素的 GIF。通过单击图像，将出现一个小的信息窗口。

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

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

我还没有在我的 V2 地图上看到这种效果。我已经在玩弄图像对象的参数大小、原点和锚点，但无济于事。锚点参数只是移动图像的位置，但它也会移动可单击区域。大小参数仅在小于 GIF 本身时才有效;然后它切割 GIF 的边缘。此外，原点参数让 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>

好的，它似乎与包含的样式有关。如果我注释掉这些线条，效果将不再可见，一切都是应有的。有趣！

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

body.no-zoom {
    zoom: 1;
}

但是，就我而言，地图是身体的直接子div节点。

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

相关内容

最新更新

热门标签：