由markercluster引起的GoogleMap错误

Question

大家好，我遇到了一些我不明白为什么的问题，我已经尝试用谷歌搜索我得到的错误，但它没有帮助。似乎我的markercluster 导致了这个问题，但我确实在其他应用程序中尝试过它工作得很好。我试过删除

var markerCluster = new MarkerClusterer(map, markers);

但我得到另一个错误是

未捕获的类型错误：无法读取属性“__e3_” 未定义

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCWDPCiH080dNCTYC-uprmLOn2mt2BMSUk&sensor=true"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<script type="text/javascript" src="findout.js"></script>

findout.js

var markers = [];
var places =Array();
function createTooltip(marker, key) {
    //create a tooltip 
    var tooltipOptions={
        marker:marker,
        content:places[key].tooltip_html,
        cssClass:'tooltip' // name of a css class to apply to tooltip
    };
    var tooltip = new Tooltip(tooltipOptions);
}
function refresh(){
setInterval(function(){
        loadMarker();
},5000);
};
    function initialize() {
                var initialLocation;
        var northpole = new google.maps.LatLng(90, 105);
        var KL = new google.maps.LatLng(3.1597,101.7000);
        var browserSupportFlag =  new Boolean();
                var map;
                var marker;
                var mapOptions;
                var mapDiv = document.getElementById("map_canvas");
        if(places.length){
         mapOptions = {
          center: new google.maps.LatLng(3.1597,101.7000),
          maxZoom:21,
          zoom: 17,
          disableDefaultUI: true,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          mapTypeControl: true,

            mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        position: google.maps.ControlPosition.TOP_LEFT
              }
        };

 map = new google.maps.Map(mapDiv,mapOptions );

                for (var key in places){
               (function(myPlace){
                    if (myPlace) {
                                    if(myPlace.icon_html !== ''){
                        var icon = {
                            url:myPlace.icon_html,
                            origin:new google.maps.Point(0,0),
                            anchor:new google.maps.Point(8,41)
                        };
                        var shadow={
                            url:"image/shadow.png",
                            origin: new google.maps.Point(0,0),
                            anchor:new google.maps.Point(8,41)
                        };
                                    }else{
                                        var icon = {
                            url:"image/default.png",
                            origin:new google.maps.Point(0,0),
                            anchor:new google.maps.Point(8,41)
                        };
                                        var shadow={
                            url:"image/shadow.png",
                            origin: new google.maps.Point(0,0),
                            anchor:new google.maps.Point(8,41)
                        }; 
                                    }
                        var marker = new google.maps.Marker({
                            map: map,
                            shadow:shadow,
                            url:myPlace.URL_html,
                            icon:icon,
                            position: new google.maps.LatLng(myPlace.position.lat, myPlace.position.lng)
                        });
                        markers.push(marker);

                        createTooltip(marker, key); 
                        google.maps.event.addListener(marker, 'click', function() {
                            marker.setAnimation(google.maps.Animation.BOUNCE);
                            setTimeout(function() {marker.setAnimation(null);}, 2000);
                                openNewBackgroundTab(marker.url);
                        }); 
                        function openNewBackgroundTab(url){
                            var a = document.createElement("a");
                            a.href = url;
                            var evt = document.createEvent("MouseEvents");
                            //the tenth parameter of initMouseEvent sets ctrl key
                            evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
                                                        true, false, false, false, 0, null);
                            a.dispatchEvent(evt);
                        }
                    }

                })(places[key]);   
        }
    }
        var markerCluster = new MarkerClusterer(map, markers);
                     // Try W3C Geolocation (Preferred)
                      if(navigator.geolocation) {
                        browserSupportFlag = true;
                        navigator.geolocation.getCurrentPosition(function(position) {
                          initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);

                          var marker = new google.maps.Marker({
                              position:initialLocation,
                                                  icon:'image/user.png',
                                                  title:'You are here !'

                          });
                          $('#findout').on('shown', function (e) {

                                google.maps.event.trigger(map, 'resize');
                                marker.setMap(map);
                                map.setCenter(initialLocation);

                            });

                        }, function() {
                          handleNoGeolocation(browserSupportFlag);
                        });

                      }
                      // Browser doesn't support Geolocation
                      else {
                        browserSupportFlag = false;
                        handleNoGeolocation(browserSupportFlag);
                      }

                      function handleNoGeolocation(errorFlag) {
                        if (errorFlag === true) {
                          alert("Geolocation service failed.");
                          initialLocation = KL;
                        } else {
                          alert("Stop using IE");
                          initialLocation = northpole;
                        }
                        map.setCenter(initialLocation);
                      }

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


function loadMarker(){
var page = new Date().getTime();
$.ajax({
    url:"js/datatesting.xml",
    dataType: 'xml',
        cache: false,
        data: {page: page},
    success: onLoadMarker        
});
console.log("loadMarker is running" )
};
function onLoadMarker(data){

$(data).find("merchantMarker").each(function(){
places.push({
    URL_html:""+$(this).find('merchantProfileUrl').text()+"",//mapshop profile url
    tooltip_html:
              "<div id='tooltips'>\n\
                    <div class='cover' style='background-image:url(image/default.jpg);'>\n\
                        <table style='margin-left:20px;'>\n\
                            <tr>\n\
                                <td><img class='photo img-circle' src='"+$(this).find('merchantProfilPicture').text()+"'>\n\
                                </td>\n\
                            </tr>\n\
                            <tr>\n\
                                <th class='text-center'><p>\n\
                                        "+$(this).find('merchantName').text()+"\n\
                                </p></th>\n\
                            </tr>\n\
                        </table>\n\
                    </div>\n\
                <div class='status'>\n\
        <p>"+$(this).find('merchantAboutUs').text()+"</p>\n\
                </div>\n\
            </div>",

icon_html:''+$(this).find('merchantMapMarker').text()+'', //mapshop marker 
position:{lat:$(this).find('merchantLat').text(), lng:$(this).find('merchantLon').text()} // shop lat and lon
});
});
console.log('onLoadMarker is running')
};

$(document).ready(function(){
$('#findout').click(function(){
        $('#suggestion').hide();
        $('#function_stream').hide();
        $('#function_me').hide();
        $('#function_findout').show();

});
loadMarker();
refresh();
});

我得到这个错误（不删除markercluster）

对不起，伙计们，我别无选择，只能在 StackOverFlow 上问这个问题。

Answer 1

函数loadMarker() 将在document.ready 上调用，并将异步填充places 数组。

您的函数initialize() 将在window.load 上调用，之后 document.ready 和loadMarker() 的调用会发生什么，但肯定会发生之前 places-array 将填充到 loadMarker() 的回调中。

但是当places-array 不为空时，地图只会在initialize() 内部实例化，因此您的map 将永远不会被实例化并且提供给MarkerClusterer 的参数map 是undefined 和不是预期的google.maps.Map-instance（导致错误的原因）

您最早可以在onLoadMarker() 末尾调用initialize，因为那里将填充places。