地图未加载到HTML页面中

马斯纳德·尼希特(Masnad Nihit)

我有一个要加载到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来解决了这个问题,但对我来说仍然无法正常工作。

戴维·康拉德

您有两个问题:

  1. 您可以google.maps.event.addDomListener(window, 'load', initializeMap); 在内部 调用initializeMap()-这样自然就不会初始化地图。

  2. 您需要在上设置一些尺寸#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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

图像未加载到baseadapter中

来自分类Dev

毕加索图像未加载到GridView中

来自分类Dev

某些网站未加载到iFrame中

来自分类Dev

图像未加载到轮播中

来自分类Dev

帮助程序未加载到Codeigniter中?

来自分类Dev

图片未加载到Android Webview中

来自分类Dev

将PHP页面加载到HTML div中

来自分类Dev

为什么HTML图像未加载到UIWebView中

来自分类Dev

图像未加载到reactjs中

来自分类Dev

来自数据库的数据未加载到HTML表Django中

来自分类Dev

HTML页面未加载(JavaScript)

来自分类Dev

Firestore图片未加载到配置文件页面

来自分类Dev

SVG图像未加载到页面上

来自分类Dev

图片未加载到网页中

来自分类Dev

为什么我的img未加载到页面html中?

来自分类Dev

资源未加载到Chrome中

来自分类Dev

出现密码屏幕时,HTML数据未加载到UIWebview中

来自分类Dev

网址未加载到iFrame中

来自分类Dev

毕加索图像未加载到GridView中

来自分类Dev

SDWebImageManager图像未加载到TableViewController中

来自分类Dev

网站未加载到UIWebView中

来自分类Dev

KML图层未加载到Google地图上

来自分类Dev

某些网站未加载到iFrame中

来自分类Dev

使用jQuery将html页面加载到div中

来自分类Dev

当元素已加载到HTML页面中时运行javascript

来自分类Dev

将HTML页面加载到Rails服务器中

来自分类Dev

Google地图未加载到我的应用设备中

来自分类Dev

OpenCart 内容未加载到页面中?

来自分类Dev

将外部导航栏加载到多个 html 页面中