【问题标题】:Generating google map from Latitude and Longitude从纬度和经度生成谷歌地图
【发布时间】:2015-11-07 21:01:09
【问题描述】:

我需要使用纬度和经度在网页中生成谷歌地图。但是地图没有显示。到目前为止,我尝试过如下 -

<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script language=javascript src='http://maps.google.com/maps/api/js?sensor=false'></script>
<div id="map"></div>
<script>
   function initialize(){
        var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
        var myOptions = {
            zoom: 4,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            }
         map = new google.maps.Map(document.getElementById("map"), myOptions);
         var marker = new google.maps.Marker({
             position: myLatlng, 
             map: map,
         title:"Fast marker"
        });
   } 

   google.maps.event.addDomListener(window,'load', initialize); 
   $(document).ready(function (){
        var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
        var myOptions = {
            zoom: 4,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            }
         map = new google.maps.Map($('#map'), myOptions);
         var marker = new google.maps.Marker({
             position: myLatlng, 
             map: map,
             title:"Fast marker"
        });
   }                                
</script>

如何生成地图?在那里找不到任何错误。请帮我。

【问题讨论】:

    标签: javascript google-maps


    【解决方案1】:

    您正在多次添加代码

    这行得通:

    <!DOCTYPE html>
    <html>
    <head>
    <script
    src="http://maps.googleapis.com/maps/api/js">
    </script>
    
    <script>
     function initialize(){
            var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
            var myOptions = {
                zoom: 4,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
                }
             map = new google.maps.Map(document.getElementById("map"), myOptions);
             var marker = new google.maps.Marker({
                 position: myLatlng, 
                 map: map,
             title:"Fast marker"
            });
       } 
    
       google.maps.event.addDomListener(window,'load', initialize); 
    
    </script>
    </head>
    
    <body>
    <div id="map" style="width:500px;height:380px;"></div>
    
    </body>
    </html>
    

    小提琴示例:https://jsfiddle.net/eugensunic/wexd3spp/1/

    CodePen 示例:http://codepen.io/anon/pen/QjZgpw

    【讨论】:

    • 还是不行。在你的小提琴上也看不到任何地图。
    • 有效,如果出现弹窗,您必须取消阻止内容,
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-06-22
    • 2012-09-28
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多