使用onClick事件显示不同的地图 - Google Maps V3。 [英] Display different maps with onClick event - Google Maps V3.
问题描述
我目前设法做到这一点的方式有些破绽，因为我并不是JS最出色的人，而且Google地图集成相当新颖，所以特赦如果代码是废话。随时提供更好，更优雅的解决方案。
到目前为止，我已经做到了这一点：$ b $ b - 创建并初始化了四张不同的地图。
- 用关联地图绘制关联标记（用餐地图获取餐馆位置等）。
- 当点击相关的导航元素时，地图应该显示（点击餐饮，用餐地图显示）。
这可以工作，但地图显示不正确。 LIVE DEMO 。
HTML：
< section class =recommend-map >
< div class =col-one>
< h1>推荐地图< / h1>
< ul>
< li>< a href =＃class =map-canvas>地图1< / a>< / li>
< li>< a href =＃class =map-canvas-2>地图2< / a>< / li>
< li>< a href =＃class =map-canvas-3>地图3< / a>< / li>
< li>< a href =＃class =map-canvas-4>地图4< / a>< / li>
< / ul>
< / div>
< div class =col-two>
< div class =content1id =map-canvasstyle =width：550px; height：300px;数据位置= javitz >
< / div>
< div class =content2id =map-canvas-2style =width：550px; height：300px;数据位置= javitz >
< / div>
< div class =content3id =map-canvas-3style =width：550px; height：300px;数据位置= pier92 >
< / div>
< div class =content4id =map-canvas-4style =width：550px; height：300px;数据位置= pier94 >
< / div>
< / div>
< / section>
JS：
function initialize（）{
//为了简洁起见，删除了实际的数组数据，这是很多的。
var dining = [
[洋基体育场，40.829584，-73.927571]，
[南大街海港，40.70514，-74.008734]，
[ Musical，40.762341，-73.978329]，
[Frick collection！，40.771385，-73.967171]
];
var drinks = [
[Central Park，40.78678，-73.966312]，
[Broadway Shows，40.765461，-73.984337]，
[百老汇音乐剧，40.762471，-73.970947]，
[Musical，40.736169，-74.001621]
];
var roofOutdoor = [
[The Ballet，40.73495，-73.998671]，
[Central Park，40.78678，-73.966312]，
[百老汇演出，40.756685，-73.987813]，
[加拉帕戈斯artspaace，40.703871，-73.990924]
];
var leisure = [
[Chelsea Girl，40.725169，-74.003005]，
[什么事情到处来了，40.722925，-74.00323]，
[图书馆，40.752166，-73.981708]
];
var mapCenter = new google.maps.LatLng（40.75688，-73.984264）;
var map = new google.maps.Map（document.getElementById（'map-canvas'），{
zoom：12，
center：mapCenter，
mapTypeId：google.maps.MapTypeId.ROADMAP
}）;
var map2 = new google.maps.Map（document.getElementById（'map-canvas-2'），{
zoom：13，
center：mapCenter，
mapTypeId：google.maps.MapTypeId.ROADMAP
}）;
var map3 = new google.maps.Map（document.getElementById（'map-canvas-3'），{
zoom：13，
center：mapCenter，
mapTypeId：google.maps.MapTypeId.ROADMAP
}）;
var map4 = new google.maps.Map（document.getElementById（'map-canvas-4'），{
zoom：13，
center：mapCenter，
mapTypeId：google.maps.MapTypeId.ROADMAP
}）;
var infowindow = new google.maps.InfoWindow（）;
var marker，marker2，marker3，marker4，i;
// Map1标记
（i = 0; i< dining.length; i ++）{
marker = new google.maps .Marker（{
position：new google.maps.LatLng（dining [i] [4]，dining [i] [5]），
map：map
}）;
google.maps.event.addListener（marker，'click'，（function（marker，i）{
return function（）{
infowindow.setContent（< h1>+ dining [i] [0] +< / h1>< p>+ dining [i] [1] +< / p>< p> + dining [i] [2 ] +< / p>< p>+ dining [i] [3] +< / p>）;
infowindow.open（map，marker）;
}
}）（marker，i））;
}
// Map2标记
（i = 0; i< drinks.length; i ++）{
marker2 = new google.maps.Marker {
position：new google.maps.LatLng（drinks [i] [1]，drinks [i] [2]），
map：map2
}）;
google.maps.event.addListener（marker2，'click'，（function（marker2，i））{
return function（）{
infowindow.setContent（drinks [i ] [b]）;
infowindow.open（map2，marker2）;
}
}）（marker2，i））;
}
// Map3标记
（i = 0; i< roofOutdoor.length; i ++）{
marker3 = new google.maps.Marker {
position：new google.maps.LatLng（roofOutdoor [i] [1]，roofOutdoor [i] [2]），
map：map3
}）;
google.maps.event.addListener（marker3，'click'，（function（marker3，i））{
return function（）{
infowindow.setContent（roofOutdoor [i ] [0]）;
infowindow.open（map3，marker3）;
}
}）（marker3，i））;
}
// Map4标记
（i = 0; i< leisure.length; i ++）{
marker4 = new google.maps.Marker {
position：new google.maps.LatLng（leisure [i] [1]，leisure [i] [2]），
map：map4
}）;
google.maps.event.addListener（marker4，'click'，（function（marker4，i））{
return function（）{
infowindow.setContent（leisure [i ] [b]）;
infowindow.open（map4，marker4）;
}
}）（marker4，i））;
}
}
google.maps.event.addDomListener（window，'load'，initialize）;
}）;
我之前完成了这项工作。
我为我的客户端JS使用了jquery。
$ b
HTML
首先，我会尝试同时呈现所有地图。是。简单地使它们全部可见，以便它们各自推动每一个。
CSS
秒，您有位置：绝对;试试position：inline-block;
JS
finally，
调用$（SELECTOR NAME）。hide（）;在你想隐藏的3个地图上，最初隐藏在JS代码的顶部。
然后是$（SELECTOR NAME）。toggle（）;打开或关闭其他人。
理由：我相信现在发生的事情是您有3个最初隐藏的地图生成，例如当客户端加载页面时，DOM实际上并没有生成内容。生成的DOM对象需要委托操作。第一张地图工作正常，因为它使用DOM生成
。我今晚可以给你一个实际的代码示例，我在工作atm对不起。
Trying to display 4 different maps based on a click event. While I do have this particular interaction happening, the map itself isn't being centered properly and also fails to actually load the map in the center SCREENSHOT HERE.
The way I've managed to do this currently is a bit of a hack as I'm not the greatest with JS and fairly new with Google Maps integration, so pardon if the code is crap. Feel free to offer better, more elegant solutions.
Thus far I've done this: - Created and initialized four different maps. - Plotted the associated marker with the associate map (dining map gets restaurant locations, etc). - When clicking related nav element, the map should display (click dining, dining map displays)
This works, but the map isn't displaying properly. LIVE DEMO.
HTML:
<section class="recommend-map">
<div class="col-one">
<h1>Recommends Map</h1>
<ul>
<li><a href="#" class="map-canvas">Map 1</a></li>
<li><a href="#" class="map-canvas-2">Map 2</a></li>
<li><a href="#" class="map-canvas-3">Map 3</a></li>
<li><a href="#" class="map-canvas-4">Map 4</a></li>
</ul>
</div>
<div class="col-two">
<div class="content1" id="map-canvas" style="width: 550px; height: 300px;" data-location="javitz">
</div>
<div class="content2" id="map-canvas-2" style="width: 550px; height: 300px;" data-location="javitz">
</div>
<div class="content3" id="map-canvas-3" style="width: 550px; height: 300px;" data-location="pier92">
</div>
<div class="content4" id="map-canvas-4" style="width: 550px; height: 300px;" data-location="pier94">
</div>
</div>
</section>
JS:
function initialize() {
// removed actual array data for brevity, it was a lot.
var dining = [
["Yankee Stadium", 40.829584,-73.927571],
["South Street Seaport", 40.70514,-74.008734],
["Musical", 40.762341,-73.978329],
["Frick collection!", 40.771385,-73.967171]
];
var drinks = [
["Central Park ", 40.78678,-73.966312],
["Broadway Shows", 40.765461,-73.984337],
["Broadway musicals", 40.762471,-73.970947],
["Musical", 40.736169,-74.001621]
];
var roofOutdoor = [
["The Ballet", 40.73495,-73.998671],
["Central Park", 40.78678,-73.966312],
["Broadway shows", 40.756685,-73.987813],
["Galapagos artspaace", 40.703871,-73.990924]
];
var leisure = [
["Chelsea Girl", 40.725169,-74.003005],
["What Goes Around Comes Around", 40.722925,-74.00323],
["The Library", 40.752166,-73.981708]
];
var mapCenter = new google.maps.LatLng(40.75688,-73.984264);
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 12,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var map2 = new google.maps.Map(document.getElementById('map-canvas-2'), {
zoom: 13,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var map3 = new google.maps.Map(document.getElementById('map-canvas-3'), {
zoom: 13,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var map4 = new google.maps.Map(document.getElementById('map-canvas-4'), {
zoom: 13,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, marker2, marker3, marker4, i;
// Map1 Markers
for (i = 0; i < dining.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(dining[i][4], dining[i][5]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent("<h1>" + dining[i][0] + "</h1><p>" + dining[i][1] + "</p><p>" + dining[i][2] + "</p><p>" + dining[i][3] + "</p>");
infowindow.open(map, marker);
}
})(marker, i));
}
// Map2 Markers
for (i = 0; i < drinks.length; i++) {
marker2 = new google.maps.Marker({
position: new google.maps.LatLng(drinks[i][1], drinks[i][2]),
map: map2
});
google.maps.event.addListener(marker2, 'click', (function(marker2, i) {
return function() {
infowindow.setContent(drinks[i][0]);
infowindow.open(map2, marker2);
}
})(marker2, i));
}
// Map3 Markers
for (i = 0; i < roofOutdoor.length; i++) {
marker3 = new google.maps.Marker({
position: new google.maps.LatLng(roofOutdoor[i][1], roofOutdoor[i][2]),
map: map3
});
google.maps.event.addListener(marker3, 'click', (function(marker3, i) {
return function() {
infowindow.setContent(roofOutdoor[i][0]);
infowindow.open(map3, marker3);
}
})(marker3, i));
}
// Map4 Markers
for (i = 0; i < leisure.length; i++) {
marker4 = new google.maps.Marker({
position: new google.maps.LatLng(leisure[i][1], leisure[i][2]),
map: map4
});
google.maps.event.addListener(marker4, 'click', (function(marker4, i) {
return function() {
infowindow.setContent(leisure[i][0]);
infowindow.open(map4, marker4);
}
})(marker4, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
});
I've done this before.
I used jquery for my client side JS.
HTML first, I would try rendering all the maps at the same time. yes. simple make them all visible so that they each push each-other around.
CSS second, you have "position:absolute;" try "position:inline-block;"
JS finally,
call "$("SELECTOR NAME").hide();" on the 3 maps you want hidden initially at the top of the JS code.
then "$("SELECTOR NAME").toggle();" to turn on or off the other ones.
reason: I believe what's happening now is you have the 3 initially hidden maps generated, such that the DOM doesn't actually have the generated content when the client loads the page. Generated DOM objects need delegated manipulation. The first map works fine because its generated with the DOM.
I could give you a actual code example tonight, I'm at work atm sorry.
这篇关于使用onClick事件显示不同的地图 - Google Maps V3。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
