我有一个要加载到HTML页面的地图,该地图的文件位于app文件夹中,但不加载。这是插入地图的地方的代码
<!-- Contact section start -->
<div id="contact" class="contact">
<div class="section ">
<div class="container">
<div class="title">
<h1>Contact Us</h1>
<p>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</p>
</div>
</div>
<div class="map-wrapper">
<div class="map-canvas" id="map-canvas">Loading map...</div>
<div class="container">
<div class="row-fluid">
<div class="span5 contact-form centered">
<h3>Say Hello</h3>
<div id="successSend" class="alert alert-success invisible">
<strong>Well done!</strong>Your message has been sent.</div>
<div id="errorSend" class="alert alert-error invisible">There was an error.</div>
<form id="contact-form" action="php/mail.php">
<div class="control-group">
<div class="controls">
<input class="span12" type="text" id="name" name="name" placeholder="* Your name..." />
<div class="error left-align" id="err-name">Please enter name.</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<input class="span12" type="email" name="email" id="email" placeholder="* Your email..." />
<div class="error left-align" id="err-email">Please enter valid email adress.</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<textarea class="span12" name="comment" id="comment" placeholder="* Comments..."></textarea>
<div class="error left-align" id="err-comment">Please enter your comment.</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<button id="send-mail" class="message-btn">Send message</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="container">
<div class="span9 center contact-info">
<p style="color:black;">123 Fifth Avenue, 12th,Belgrade,SRB 11000</p>
<p class="info-mail">[email protected]</p>
<p style="color:black;">+11 234 567 890</p>
<p style="color:black;">+11 286 543 850</p>
</div>
</div>
</div>
</div>
<!-- Contact section edn -->
这是js文件,其中包含加载地图所需的所有代码。
//Initialize google map for contact setion with your location.
function initializeMap() {
var lat = '44.8164056'; //Set your latitude.
var lon = '20.46090424'; //Set your longitude.
var centerLon = lon - 0.0105;
var myOptions = {
scrollwheel: false,
draggable: false,
disableDefaultUI: true,
center: new google.maps.LatLng(lat, centerLon),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Bind map to elemet with id map-canvas
var map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(lat, lon),
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
google.maps.event.addDomListener(window, 'load', initializeMap);
}
我看到其他人也遇到类似的问题,但是他们通过在标记区域中键入optimized:false来解决了这个问题,但对我来说仍然无法正常工作。
您有两个问题:
您可以google.maps.event.addDomListener(window, 'load', initializeMap);
在内部 调用initializeMap()
-这样自然就不会初始化地图。
您需要在上设置一些尺寸#map-canvas
;即使不是问题#1,也永远不会显示地图。
纠正了这两个问题后,它就可以工作-> http://jsfiddle.net/1fdzz7gv/
小提琴的代码与OP中的代码完全相同,只不过google.maps.event.addDomListener(window, 'load', initializeMap);
它放在外面initializeMap()
并#map-canvas
具有一定的尺寸
#map-canvas {
width: 300px;
height: 200px;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句