Question

我的代码（Google Maps API 3 JS）here正是我想要的。

除了每个InfoWindow的内容都比这大得多。（并且会有30个！）

所以我需要能够为每个InfoWindow 设置自己的位置。

我花了大约12个小时尝试了下面代码中我能想到的每一个组合。

任何想法，我做错了，请：我怀疑它与（之间的关系）有关：

                position: winLatLng

在我创建 infowindow 对象以及我如何调用它时：

                infowindow.open(map,this);

理想情况下，我想将数组的第5和第6个元素用于 winLatLng 。但我无能为力。

非常感谢有时间提出建议的人！

完整代码如下：

    <!DOCTYPE html>
<html>
<head>
    <title>Foundation 30 Year Anniversary Maps Prototype</title>
    <script src='http://code.jquery.com/jquery.min.js' type='text/javascript'></script>
    <style>
        html {
            height: 100%;
        }
        body {
            height: 100%;
            margin: 0;
            padding: 0;
            }
        #map_canvas {
            width: 900px;
            height: 700px;
        }
    </style>
</head>
<body>
    <script type="text/javascript"
        src="http://maps.google.com/maps/api/js?">
    </script>
    <script type="text/javascript">
        var infowindow = null;
        var MY_MAPTYPE_ID = 'custom_style';
        $(document).ready(function () { initialize();  });
        function initialize() {
            google.maps.Map.prototype.setCenterWithOffset= function(LatLng, offsetX, offsetY) {
                var map = this;
                var ov = new google.maps.OverlayView();
                ov.onAdd = function() {
                    var proj = this.getProjection();
                    var aPoint = proj.fromLatLngToContainerPixel(LatLng);
                    aPoint.x = aPoint.x+offsetX;
                    aPoint.y = aPoint.y+offsetY;
                    map.setCenter(proj.fromContainerPixelToLatLng(aPoint));
                }; 
                ov.draw = function() {}; 
                ov.setMap(this); 
            };
            var featureOpts = [{
                "featureType": "administrative",
                "stylers": [
                { "color": "#848080" },
                { "weight": 0.1 }
                ] },
                {
                "featureType": "administrative.country",
                "elementType": "labels",
                "stylers": [
                { "visibility": "off" }
                ]},{
                "featureType": "water",
                "stylers": [
                { "color": "#C3C3C6"}
                ] },{
                "featureType": "landscape.natural",
                "stylers": [
                { "color": "#F0F0F0"}
                ] },{
                }
            ]
            google.maps.visualRefresh=true;
            var myLatlng = new google.maps.LatLng(51.30, 0.7);
            var centerMap = new google.maps.LatLng(51.30, 0.7);
            var mapOptions = {
                zoom: 2,
                disableDefaultUI: true,
                center: centerMap,
                mapTypeControlOptions: {
                    mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
                },
                mapTypeId: MY_MAPTYPE_ID
            };
            var styledMapOptions = {
                name: 'Custom Style'
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
            map.setCenterWithOffset(myLatlng, 50, 225);
            var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
            map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
            setMarkers(map, sites);
            var winLatLng;
            infowindow = new google.maps.InfoWindow({
                disableAutoPan : true,
                position: winLatLng
            });
        };
        var losangelescontentString = 'Los Angeles content';
        var portonovocontentstring = 'Porto Novo content';
        var florencecontentstring = 'Florence content';
        var shackletoncontentstring= 'Shackleton content';
        var sites = [
            ['Los Angeles', 34.054082,-118.24261, losangelescontentString,-17,30],
            ['Porto Novo', 6.501411,2.604275, portonovocontentstring,-54.054082,0],
            ['Shackleton', -77.550000, 166.150000, shackletoncontentstring,0,0],
            ['Florence', 43.773046,11.255901, florencecontentstring,-10,18]
        ];
        function setMarkers(map, markers) {
            for (var i = 0; i < markers.length; i++) {
                var sites = markers[i];
                var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
                var winLatLng = new google.maps.LatLng(sites[4], sites[5]);
                var marker = new google.maps.Marker({
                    title: sites[0],
                    position: siteLatLng,
                    html: sites[3],
                    map: map
                });
                google.maps.event.addListener(marker, "click", function () {
                infowindow.setContent(this.html);
                infowindow.open(map,this);
                });
            }
        }
    </script>
    <div id="map_canvas"></div>
</body>
</html>

Answer 1

如果您使用google.maps.InfoWindow.open(map, marker)语法，则将信息窗口相对于标记定位。如果您不想这样，请在致电google.maps.InfoWindow.open(map)后使用google.maps.InfoWindow.setPosition(desiredPosition)。

google.maps.event.addListener(marker, "click", function () {
   infowindow.setContent(this.html);
   infowindow.setPosition(winLatLng);
   infowindow.open(map);
});

虽然，由于你没有使用函数闭包，你可能想要将winLatLng设置为标记的属性，然后在点击监听器中使用它，如下所示：

    function setMarkers(map, markers) {
        for (var i = 0; i < markers.length; i++) {
            var sites = markers[i];
            var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
            var winLatLng = new google.maps.LatLng(sites[4], sites[5]);
            var marker = new google.maps.Marker({
                title: sites[0],
                position: siteLatLng,
                html: sites[3],
                winLatLng: winLatLng,
                map: map
            });
            google.maps.event.addListener(marker, "click", function () {
              infowindow.setContent(this.html);
              infowindow.setPosition(this.winLatLng);
              infowindow.open(map);
            });
        }
    }

working fiddle

谷歌地图：更改多个InfoWindows的位置

1 个答案: