Javascript Google地图v3 api地图未完全加载_Javascript_Jquery_Html_Google Maps_Google Maps Api 3

Javascript Google地图v3 api地图未完全加载

javascript jquery html google-maps google-maps-api-3

Javascript Google地图v3 api地图未完全加载,javascript,jquery,html,google-maps,google-maps-api-3,Javascript,Jquery,Html,Google Maps,Google Maps Api 3,我正在开发一个应用程序，它将显示附近餐馆的地图地图显示了，但加载需要很长时间，而且从未真正完全加载我已经到了最后期限，我尝试了各种各样的解决方案，但都没有成功有人请帮忙见下面的代码： <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Food &

我正在开发一个应用程序，它将显示附近餐馆的地图

地图显示了，但加载需要很长时间，而且从未真正完全加载

我已经到了最后期限，我尝试了各种各样的解决方案，但都没有成功

有人请帮忙

见下面的代码：

    <!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Food & Drink</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>


<body>
  <div id="map" style="width: 360px; height: 300px;"></div>

  <script type="text/javascript">
    var locations = [
      ['Little Shebas', 39.833691, -84.892375, 1],
      ['Roscoes Coffee Bar & Tap Room', 39.833891, -84.892130, 2],
      ['Ullerys Homemade Icecream', 39.834401, -84.889190, 3],
       ['Firehouse BBQ and Blues', 39.833630, -84.891887, 4],
      ['Tin Lizzie Cafe', 39.829140, -84.890857, 6]
      ['Joes Pizza', 39.834409, -84.889822, 5],
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 25,
      center: new google.maps.LatLng(39.830184, -84.893401),
      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>
    </body>
    </html>


饮食
变量位置=[
[Little Shebas'，39.833691，-84.892375,1]，
['Roscoes咖啡吧和水龙头房'，39.833891，-84.892130，2]，
[Ullerys自制冰淇淋”，39.834401，-84.889190,3]，
[Firehouse BBQ and Blues'，39.833630，-84.891887,4]，
[Tin Lizzie Cafe'，39.829140，-84.890857，6]
[Joes Pizza'，39.834409，-84.889822,5]，
];
var map=new google.maps.map（document.getElementById（'map'）{
缩放：25，
中心：新google.maps.LatLng（39.830184，-84.893401），
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var infowindow=new google.maps.infowindow（）；
var标记，i；
对于（i=0；i

我无法确认您描述的行为。一切似乎都很正常，您的代码看起来应该正常工作

检查一下你的代码。我玩了一下初始缩放级别并调整了中心。您指定的中心实际上并不靠近标记，而且缩放级别非常高，一开始我以为地图没有加载

var center = new google.maps.LatLng(39.833691, -84.892375);

google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    center: center,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

我相信你阵列中的问题。查看chrome开发工具中的代码，它显示了包含5个元素（而不是6个）的位置数组，其中第五个元素是

未定义的

。第5个元素后缺少逗号，最后一个元素后有一个尾随逗号。试图访问未定义元素上的属性会引发javascript异常，该异常会停止页面上的执行。此外，在您设置的初始缩放时，任何内容都不可见。缩小显示带有标记的地图。将地图选项中的初始缩放设置为14。

尝试使用低于最大值的初始缩放级别（如11左右），看看这是否会影响加载。感谢Jared的反馈。我把它改成了11。它加载了两小块地图，但没有显示任何标记，似乎在初次加载后就一直坐在那里。per Antserno，你是在桌面上还是在手机上尝试此操作？只是刷新了页面，没有显示标记，但仍然只显示地图的小部分在“Tin Lizzie Cafe”行后添加一个逗号，并删除后一行与'乔比萨饼'这正是我要找的！但当我改变我的中心时，它根本不显示。我很困惑！！！！看看我的答案。修复阵列并将初始缩放设置为20@James Taylor您的示例仅部分有效，js错误和4个标记（而不是6I）删除了第6个元素，并更改了缩放。现在来到一个灰色的地图区域，没有内容。是的，一定要解决这行后面数组中的逗号问题：

['Tin Lizzie Cafe'，39.829140，-84.890857，6]

，尽管后面的逗号在JS中并不重要。可能只在我这边，但在编辑

中心时，JS小提琴似乎被窃听了。只要确保你所做的一切都出现在上面的表格中。JS fiddle似乎偏离了一个字符。我已经更新了我的答案，应该说14而不是20，我的错@James Taylor表示，在旧版本的IE中，尾随逗号确实很重要