gpt4 book ai didi

css - 另一个 Div 中的 Google Maps API v3

转载 作者:太空宇宙 更新时间:2023-11-04 15:20:16 25 4
gpt4 key购买 nike

这是一个下拉 Div - 它适用于除 GoogleMap 之外的所有内容。

我显示了一半或可能是 1/4 的 map ...当我摆脱 div 时一切正常...或者是否有没有 div 的解决方法?想法...我尝试声明表、p 等...没有运气...

Javascript 下拉代码和 Div 调用

   <script type="text/javascript">
function showElement(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="none"){
myLayer.style.display="block";
myLayer.backgroundPosition="top";
} else {
myLayer.style.display="none";
}
}
</script>

<div class=catlist>
<table border=0 cellpadding=4>
<tr>
<td valign=middle><img src="images/plus.png" onclick="javascript:showElement('ed')"></td>
<td valign=middle><a href="#" onclick="javascript:showElement('ed')"><b>Edit GPS
Map</b></a></td>
</tr></table>
</div>
<div class="qlist" id="ed" style="display:none;">

<div id="map" style="width: 500px; height: 250px;"></div>

</div>

添加 Google Javascript...

这是实际的 Google map Javascript...冷聚变绘制 # 标记...这在 div 之外工作正常......上面建议的代码可以显示正确的 map 界面......但是情节的中心不起作用......并且标记显示在左上角并提供了上面的代码...

  <div id="map" style="width: 500px; height: 250px;"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript">
</script>

<script type="text/javascript">

var locations = [
["#bsname#", #gpslat#, #gpslong#, #busid#],
];

var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: new google.maps.LatLng(#gpslat#, #gpslong#),
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]);
infowindow.open(map, marker);
}
})(marker, i));
}

</script>

最佳答案

我所做的更改是:

  • 在 div 展开时触发调整大小
  • 调整大小后使 map 居中
  • 使 map 和位置变量成为全局变量。

jsfiddle 在这里:

http://jsfiddle.net/Mgp9z/9

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP };

// CHANGED locations and map now global so they refer to the same thing in both initialize and showElement

var locations = [
["a", 40.2, -88.8, "k"],
];

var map;

function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
// CHANGED
zoom: 10,
center: new google.maps.LatLng(40.2, -88.8),
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]);
infowindow.open(map, marker);
}
})(marker, i));
}

}
function showElement(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="none"){
myLayer.style.display="block";
myLayer.backgroundPosition="top";

// *** add the trigger here ***
google.maps.event.trigger(map, 'resize');
var mylat=locations[0][1];
var mylng=locations[0][2];
map.setCenter(new google.maps.LatLng(mylat,mylng));

} else {
myLayer.style.display="none";
}
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div class=catlist>
<table border=0 cellpadding=4>
<tr>
Lat: <input type="text" id="mylat" value="40.2">
Lng: <input type="text" id="mylng" value="-88.8">
<!-- <td valign=middle><img src="images/plus.png" onclick="javascript:showElement('ed')"></td> -->
<td valign=middle><a href="#" onclick="javascript:showElement('ed')"><b>Edit GPS
Map</b></a></td>
</tr></table>
</div>
<div class="qlist" id="ed" style="display:none;">

<div id="map" style="width: 500px; height: 250px;"></div>

</div>
</body>
</html>

关于css - 另一个 Div 中的 Google Maps API v3,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10273411/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com