在谷歌地图中点击标记时如何拆分页面？

Question

如果我点击我的标记，我的窗口应该分成两部分，我的地图应该定位在左侧，右侧应该显示市场的数组内容？

var locations = [
    [
            "clientDigital",
            12.9965541, 80.2559071,
            4,
            "Steven F. Morris",
            "Sandfiddler Pawn Shop",
            "5429 Tidewater Dr.",
            "found"
        ],
        [
            "Aubrica the Mermaid (nee: Aubry Alexis)",
            36.8618, -76.203,
            5,
            "Myke Irving/ Georgia Mason",
            "USAVE Auto Rental",
            "Virginia Auto Rental on Virginia Beach Blvd",
            "found"
        ]
    ]

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    // center: new google.maps.LatLng(-33.92, 151.25),
    center: new google.maps.LatLng(36.8857, -76.2599),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();
var marker, i;

for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
    });


    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(locations[i][0] + "<br />" + locations[i][4] + "<br />" + locations[i][5] + "<br />" + locations[i][6]);
            infowindow.open(map, marker);
        }

    })(marker, i));
}
</script>
<div id="map" ></div>

Answer 1

您可以在单击标记时显示的 html 部分中添加一个隐藏的 div，同时将特定值填充到已经准备好的 div 中。

我的示例不会在地图的右侧，但这可以通过一点 CSS（float: left;）来完成。 我还没有尝试过，但是我会这样做

var locations = [
    [
            "clientDigital",
            12.9965541, 80.2559071,
            4,
            "Steven F. Morris",
            "Sandfiddler Pawn Shop",
            "5429 Tidewater Dr.",
            "found"
        ],
        [
            "Aubrica the Mermaid (nee: Aubry Alexis)",
            36.8618, -76.203,
            5,
            "Myke Irving/ Georgia Mason",
            "USAVE Auto Rental",
            "Virginia Auto Rental on Virginia Beach Blvd",
            "found"
        ]
    ]

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    // center: new google.maps.LatLng(-33.92, 151.25),
    center: new google.maps.LatLng(36.8857, -76.2599),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();
var marker, i;

for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
    });


    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(locations[i][0] + "<br />" + locations[i][4] + "<br />" + locations[i][5] + "<br />" + locations[i][6]);
            infowindow.open(map, marker);

            //show singleMarkerValues-div
            $('#singleMarkerValues').show();

            //insert specific values
            $('#singleName').html(locations[i][0]);
            $('#singleLatLng').html(locations[i][1]+', '+locations[i][2]);
            $('#singlePerson').html(locations[i][3]);
            ...
        }

    })(marker, i));
}
</script>


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

<div id="singleMarkerValues" style="display: none;">
    <div id="singleName"></div>
    <div id="singleLatLng"></div>
    <div id="singlePerson"></div>
    ....
</div>

Answer 2

你必须在你的标记上放置一个点击监听器来调整 div 的大小，调用 map resize 并在右侧显示“数据”。

听者应该是这样的

 marker.addListener('click', function() {
             map.setCenter(marker.getPosition());
              document.getElementById("map").style.width = "50%";
              google.maps.event.trigger(map, 'resize')
                map.setCenter(marker.getPosition());
              document.getElementById("data").style.display = "inline";
              document.getElementById("data").innerHTML = locations.toString();
            });

map 是地图实例，你有一个地图 div 和一个包含你的数组的数据 div

我有这个fiddle 用于演示。

我没有格式化数据。

希望对你有帮助