尝试根据点击事件显示 4 个不同的 map 。虽然我确实发生了这种特殊的交互,但 map 本身没有正确居中,也无法实际将 map 加载到中心 SCREENSHOT HERE 。
我目前设法做到这一点的方式有点黑客,因为我不是最擅长 JS 的人,而且对 Google map 集成也很陌生,所以如果代码很糟糕,请原谅。请随意提供更好、更优雅的解决方案。
到目前为止我已经这样做了: - 创建并初始化了四个不同的 map 。 - 用关联 map 绘制关联标记(就餐 map 获取餐厅位置等)。 - 当点击相关导航元素时,应该显示 map (点击餐饮,显示餐饮 map )
这可行,但 map 无法正确显示。 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);
});
最佳答案
我以前做过这个。
我使用 jquery 作为我的客户端 JS。
HTML 首先,我会尝试同时渲染所有 map 。是的。简单地让它们全部可见,以便它们互相插入。
CSS 其次,你有“position:absolute;”尝试“位置:内联 block ;”
JS 最后,
调用“$(“选择器名称”).hide();”在 JS 代码顶部最初想要隐藏的 3 个 map 上。
然后“$(“选择器名称”).toggle();”打开或关闭其他的。
原因:我相信现在发生的情况是您生成了 3 个最初隐藏的 map ,这样当客户端加载页面时,DOM 实际上并没有生成的内容。生成的 DOM 对象需要委托(delegate)操作。第一个 map 工作正常,因为它是使用 DOM 生成的。
今晚我可以给你一个实际的代码示例,我正在工作,很抱歉。
关于javascript - 使用 onClick 事件显示不同的 map - Google map V3。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20887110/