Question

在map-div之前添加文本（或其他内容）时，google-map-marker周围的可点击区域正在移位/放错位置。它在chrome中运行良好，即等等 - 只有firefox似乎会导致这个问题（据我所见）。当 - 在web-console中 - 将map-div的elementstyle从'relative'更改为'static'时问题就消失了。

下面的代码是从googles map-examples中借用的 - 如果我取消注释lorem-text，则map-markers可点击区域正在移动/放错地方。关于如何解决问题的任何建议（如果有问题 - 我可能错过了一些明显的事情）：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Complex icons</title>
    <style>
        html, body, #map-canvas
        {
            height: 800px;
            width: 800px;
            margin: 0px;
            padding: 0px;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>
        function initialize() {
            var mapOptions = {
                zoom: 10,
                center: new google.maps.LatLng(-33.9, 151.2)
            }
            var map = new google.maps.Map(document.getElementById('map-canvas'),
                                          mapOptions);

            setMarkers(map, beaches);
        }

        var beaches = [
          ['Bondi Beach', -33.890542, 151.274856, 4],
          ['Coogee Beach', -33.923036, 151.259052, 5],
          ['Cronulla Beach', -34.028249, 151.157507, 3],
          ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
          ['Maroubra Beach', -33.950198, 151.259302, 1]
        ];

        function setMarkers(map, locations) {
            var image = {
                url: 'https://www.google.com/support/enterprise/static/geo/cdate/art/dots/blue_dot.png',
                size: new google.maps.Size(21, 21),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(10, 10)  
            };

            var shape = {
                coords: [0,0, 0,21, 21,21, 21,0],
                type: 'poly'
            };
            for (var i = 0; i < locations.length; i++) {
                var beach = locations[i];
                var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
                var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    icon: image,
                    shape: shape,
                    title: beach[0]
                });
            }
        }

        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
</head>
<body>

    <!--<p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
    </p>-->

    <div id="map-canvas"></div>

</body>
</html>

更新

此错误已在https://issuetracker.google.com/issues/35826867中处理，并于2015年9月在API 3.21版中得到修复。

Answer 1

尝试将js src从v = 3.exp更改为v = 3

Answer 2

将版本指定为v = 3可确保您拥有最新的发行版本。目前的发布版本是3.20。问题出现在实验版本，目前是3.21，如果你没有使用v参数明确指定版本，这是默认的默认版本。

在firefox中相对位置导致google-map-markers可点击区域出现问题

更新

2 个答案: