Javascript 在谷歌地图中点击标记时如何分割页面？_Javascript_Jquery_Html_Google Maps_Jquery Ui

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

javascript jquery html google-maps jquery-ui

Javascript 在谷歌地图中点击标记时如何分割页面？,javascript,jquery,html,google-maps,jquery-ui,Javascript,Jquery,Html,Google Maps,Jquery Ui,如果我点击我的标记，我的窗口应该一分为二，我的地图左边应该在哪里，右边应该显示市场的数组内容 var locations = [ [ "clientDigital", 12.9965541, 80.2559071, 4, "Steven F. Morris", "Sandfiddler Pawn Shop", "5429 Tidewater Dr

如果我点击我的标记，我的窗口应该一分为二，我的地图左边应该在哪里，右边应该显示市场的数组内容

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>

var位置=[
[
“clientDigital”，
12.9965541, 80.2559071,
4.
“史蒂文·F·莫里斯”，
“沙提琴当铺”，
“5429潮水博士”，
“找到”
],
[
“美人鱼奥布里卡（nee:Aubry Alexis）”，
36.8618, -76.203,
5.
“梅克·欧文/乔治亚·梅森”，
“USAVE汽车租赁”，
“弗吉尼亚海滩大道弗吉尼亚汽车租赁”，
“找到”
]
]
var map=new google.maps.map（document.getElementById（'map'）{
缩放：12，
//中心：新谷歌地图LatLng（-33.92151.25），
中心：新google.maps.LatLng（36.8857，-76.2599），
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var infowindow=new google.maps.infowindow（）；
var标记，i；
对于（i=0；i”+locations[i][4]+“
”+locations[i][5]+“
”+locations[i][6]）；
信息窗口。打开（地图、标记）；
}
})（marker，i））；
}

您可以在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>

var位置=[
[
“clientDigital”，
12.9965541, 80.2559071,
4.
“史蒂文·F·莫里斯”，
“沙提琴当铺”，
“5429潮水博士”，
“找到”
],
[
“美人鱼奥布里卡（nee:Aubry Alexis）”，
36.8618, -76.203,
5.
“梅克·欧文/乔治亚·梅森”，
“USAVE汽车租赁”，
“弗吉尼亚海滩大道弗吉尼亚汽车租赁”，
“找到”
]
]
var map=new google.maps.map（document.getElementById（'map'）{
缩放：12，
//中心：新谷歌地图LatLng（-33.92151.25），
中心：新google.maps.LatLng（36.8857，-76.2599），
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var infowindow=new google.maps.infowindow（）；
var标记，i；
对于（i=0；i”+locations[i][4]+“
”+locations[i][5]+“
”+locations[i][6]）；
信息窗口。打开（地图、标记）；
//显示singleMarkerValues div
$（'#singleMarkerValues'）.show（）；
//插入特定值
$（'#singleName'）.html（位置[i][0]）；
$（'#singleLatLng'）.html（locations[i][1]+'、'+locations[i][2]）；
$（'#singlePerson'）.html（locations[i][3]）；
...
}
})（marker，i））；
}
....

您可以在单击标记时显示的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>

var位置=[
[
“clientDigital”，
12.9965541, 80.2559071,
4.
“史蒂文·F·莫里斯”，
“沙提琴当铺”，
“5429潮水博士”，
“找到”
],
[
“美人鱼奥布里卡（nee:Aubry Alexis）”，
36.8618, -76.203,
5.
“梅克·欧文/乔治亚·梅森”，
“USAVE汽车租赁”，
“弗吉尼亚海滩大道弗吉尼亚汽车租赁”，
“找到”
]
]
var map=new google.maps.map（document.getElementById（'map'）{
缩放：12，
//中心：新谷歌地图LatLng（-33.92151.25），
中心：新google.maps.LatLng（36.8857，-76.2599），
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var infowindow=new google.maps.infowindow（）；
var标记，i；
对于（i=0；i”+locations[i][4]+“
”+locations[i][5]+“
”+locations[i][6]）；
信息窗口。打开（地图、标记）；
//显示singleMarkerValues div
$（'#singleMarkerValues'）.show（）；
//插入特定值
$（'#singleName'）.html（位置[i][0]）；
$（'#singleLatLng'）.html（locations[i][1]+'、'+locations[i][2]）；
$（'#singlePerson'）.html（locations[i][3]）；
...
}
})（marker，i））；
}
....

您必须在标记上放置一个单击侦听器，以调整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是map实例，您有一个map div和一个data div，其中将包含您的数组

我有这个演示

我没有格式化数据

希望这有帮助

您必须在标记上放置一个单击侦听器，以调整div的大小，调用map resize并显示t