Google 地图 API v3 标记仅有时加载

Question

我有一个使用 Google Maps API V3 构建的地图制作工具。它允许用户输入两个或多个位置并生成地图和路线。我还有一个复选框，单击该复选框时，会显示指示附近兴趣点的标记。

当我第一次构建该工具时，我认为它每次都运行良好。不过最近，我注意到单击复选框时标记并不总是出现。地图和路线工作正常，但标记只是偶尔工作。当它们不起作用时似乎会出现此错误：

Uncaught ReferenceError: map is not defined

它引用了 javascript 的 "cmarkers" 部分（见下文）。

背景细节： 这是 Rails 网络应用程序和名为 "Itineraries" 的网页/布局的一部分。当您登陆行程网页并单击 "Map Maker" 图标时，地图制作工具就会出现。它加载在一个 i 框架中，称为 "map.html.erb"，地图视图位于 /views/itineraries 中。然而，地图制作者的所有 javascript 都存在于 Itineraries 布局文件中。

根据查看这些帖子，我认为这可能是我订购或初始化代码的方式，我认为罪魁祸首可能在代码的 "cmarkers" 部分。

Google Maps API Sometimes Not Showing Markers
Google maps api(v3) doesn't show markers
Google Maps API v3 javascript Markers don't always load

我尝试了几种不同的更改，但每一种都不起作用或阻止了地图初始化。这是 javascript;请注意，API 键和其他小部分已被编辑。下面是标记的代码。

        <script src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&sensor=false"></script>
    <script type='text/javascript'> 
    $(function(){
        var directionsDisplay;
        var map;            

        function overlaysClear() {
          if (markersArray) {
            for( var i = 0, n = markersArray.length; i < n; ++i ) {
              markersArray[i].setVisible(false);
            }
          }
        }

        function overlaysShow() {
          if (markersArray) {
            for( var i = 0, n = markersArray.length; i < n; ++i ) {
              markersArray[i].setVisible(true);
            }
          }
        }

        $("#showmapview").click(function() {
        overlaysClear();
        $('#mapeach').attr('checked', false);
        });

        $('#mapeach').change(function() {
         if( $('#mapeach').attr("checked")) {
                  overlaysShow();
                  }
                  else  {
                  overlaysClear();
                  }
        });
        cmarkers();

        google.maps.event.addDomListener(window, 'load', initialize); 
    });

    var directionsService = new google.maps.DirectionsService();
        var markersArray = [];
        var arrInfoWindows = null;

    function initialize() {
          var rendererOptions = {
          draggable: true,
          panel:document.getElementById('directions_panel')
         };

          directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
          var chicago = new google.maps.LatLng(41.850033, -87.6500523);
              var mapOptions = {
              zoom: 6,
              center: chicago,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            }
          map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

          directionsDisplay.setMap(map);
        }

        function calcRoute() {

            var start = document.getElementById("start").value;
            var end = document.getElementById("end").value;
            var waypts = [];
          var checkboxArray = document.getElementById("waypoints");
          for (var i = 0; i < checkboxArray.length; i++) {
             waypts.push({
                  location:checkboxArray[i].value,
                  stopover:true
              });
         }

          var request = {
              origin: start,
              destination: end,
              waypoints: waypts,
              optimizeWaypoints: optimize,
              travelMode: google.maps.TravelMode.DRIVING
          };
          directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
              directionsDisplay.setDirections(response);
              var route = response.routes[0];
            }    
          });
        }; 

        function cmarkers() {
                    $.getJSON( "/mapeach.js", {}, function( data ) {
                    $.each( data, function( i, item ) {
                    var loc = item.mainlocation;
                    $("#markers").append('<li><a href="#" rel="' + i + '">' + loc.nickname + '</a></li>');
                    var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(+loc.latitude, +loc.longitude),
                    map: map,
                    title: loc.nickname,
                    });
                    markersArray.push(marker);

                      var infowindow = new google.maps.InfoWindow({
                            content: '<a class="clink" href="/spots/'+ loc.id +'/'+ loc.nickname +'" target="_blank">'+ loc.nickname +'</a>'
                            });

                    google.maps.event.addListener(marker, 'click', function() {
                         if (arrInfoWindows != null) { 
                            arrInfoWindows.close(); 
                        } 
                        infowindow.open(map,marker);
                        arrInfoWindows = infowindow;
                        });
                      });
                    });
                };  
    </script>

mapeach.js文件格式如下：

[{"mainlocation":{"latitude":"40.706352","nickname":"First Location","id":100000,"longitude":"-73.987650"}},{"mainlocation":{"latitude":"34.061148","nickname":"Second Location","id":100001,"longitude":"-118.273067"}}]

Answer 1

我可以通过将 cmarkers 代码移到初始化中来解决这个问题。我认为 javascript 没有明确指出初始化中的 map 变量也是 cmarkers 函数中的 map 变量（抱歉，如果语言不准确；我在 js 方面不是很好）。见下文：

function initialize() {
              var rendererOptions = {
              draggable: true,
              panel:document.getElementById('directions_panel')
             };

          directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
          var chicago = new google.maps.LatLng(41.850033, -87.6500523);
              var mapOptions = {
              zoom: 6,
              center: chicago,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            }
          map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

          directionsDisplay.setMap(map);

          cmarkers();
          function cmarkers() {
                $.getJSON( "/mapeach.js", {}, function( data ) {
                $.each( data, function( i, item ) {
                var loc = item.mainlocation;
                $("#markers").append('<li><a href="#" rel="' + i + '">' + loc.nickname + '</a></li>');
                var marker = new google.maps.Marker({
                position: new google.maps.LatLng(+loc.latitude, +loc.longitude),
                map: map,
                title: loc.nickname,
                });
                markersArray.push(marker);

                  var infowindow = new google.maps.InfoWindow({
                        content: '<a class="clink" href="/spots/'+ loc.id +'/'+ loc.nickname +'" target="_blank">'+ loc.nickname +'</a>'
                        });

                google.maps.event.addListener(marker, 'click', function() {
                     if (arrInfoWindows != null) { 
                        arrInfoWindows.close(); 
                    } 
                    infowindow.open(map,marker);
                    arrInfoWindows = infowindow;
                    });
                  });
                });
            };

特别感谢这个 post 给我的想法：can't see google marker

Google 地图 API v3 标记仅有时加载

Google Maps API v3 Markers only load sometimes

javascript

ruby-on-rails

google-maps-api-3

google-maps-markers

ruby-on-rails-2