Javascript 谷歌地图没有标记_Javascript_Google Maps Api 3_Markerclusterer

Javascript 谷歌地图没有标记
javascript google-maps-api-3
Javascript 谷歌地图没有标记,javascript,google-maps-api-3,markerclusterer,Javascript,Google Maps Api 3,Markerclusterer,我正在尝试将markerclusterplus.js与google maps api v3结合使用。我在一个地址数组中循环，对每个地址进行地理编码，并添加一个标记和信息窗口。我将这些标记推送到一个名为markers的数组中，并使用以下代码将它们添加到集群中 var markerCluster=新的MarkerClusterer（地图、标记）没有显示聚集标记。如果我加上 map: map 对于我的标记，它们显示为标准标记，所以这一切都是好的。当使用警告标记数组时 alert(markers.t
我正在尝试将markerclusterplus.js与google maps api v3结合使用。我在一个地址数组中循环，对每个地址进行地理编码，并添加一个标记和信息窗口。我将这些标记推送到一个名为markers的数组中，并使用以下代码将它们添加到集群中
var markerCluster=新的MarkerClusterer（地图、标记）
没有显示聚集标记。如果我加上
map: map

对于我的标记，它们显示为标准标记，所以这一切都是好的。当使用警告标记数组时
alert(markers.toString())

未返回任何内容，因此可能未将任何内容推送到阵列
完整代码如下




无标题文件
var映射//映射变量
var地理编码器//地理编码器变量
var信息窗口；
//var标记//标记变量
//选项变量
变量myOptions={
缩放：2，
mapTypeId:google.maps.mapTypeId.ROADMAP，
disableDefaultUI:true，
}; 
var LatLngList=[]；
//地理编码器功能
函数myGeocode（）{
infowindow=新建google.maps.infowindow({
最大宽度：200
});
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
geocoder=新的google.maps.geocoder（）；
var titles=[“克利夫之家的安妮”，
“路易斯城堡”，
“米开勒姆修道院”，
“菲什伯恩罗马宫殿和花园”，
“马立宾博物馆”，“牧师之家”，
“长男人”
];
变量地址=[
“克利夫家的安妮，52号，路易斯南上方高街，BN7 1JA”，
“巴比肯之家博物馆，169号，路易斯大街，BN7 1YE”，
“Michelham修道院，上迪克尔，海尔舍姆，东苏塞克斯，BN27 3QS”，
“菲什伯恩罗马宫殿，罗马路，菲什伯恩，西苏塞克斯，第19页3QR”，
“马立宾博物馆，西苏塞克斯郡肖勒姆海滨大街，BN43 5DA”，
“牧师之家，北巷，西霍特利，西苏塞克斯，RH19 4PP”，
“威尔明顿的长个子男人”
];
变量说明=[
“你可以探索都铎王朝和伊丽莎白王朝是如何在家生活、工作和放松的。”，
“爬上这座有1000年历史的诺曼城堡的顶部，可以看到整个苏塞克斯令人惊叹的全景。”，
“英格兰最长的充满水的护城河环绕着这个遗址，可以追溯到1229年。”，
“欢迎来到英国最大的罗马家庭”，
“引人注目的棋盘燧石和卡昂石灰岩立面是苏塞克斯最古老的诺曼建筑之一的一部分。”，
“这是唯一一座向公众开放的同类建筑，这座美丽的15世纪沃登大厅坐落在一座传统的农舍花园中。”，
“威尔明顿的长个子男人”
];
对于（var i=0；i})（地址、标题、描述）；//首先，每次在循环内重新定义标记数组时，必须在循环外定义标记数组
其次，geocoder.geocode是异步工作的，因此直到循环结束之后，甚至在您的alert（）调用之后，地理编码才真正完成
第三，没有必要在循环中使用闭包，因为每次通过循环都会重新定义一个函数。在这种情况下，我总是希望在当前函数中添加一个私有方法。因此，执行地理编码调用的函数只定义一次，并根据需要调用。现在我们需要做的就是观察（从geocoder的回调函数中）markers数组的长度会增长，直到与addresses数组的长度相同，然后我们知道所有地理编码都已完成（当然，假设一切顺利），是时候完成了：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;ver=3.5.1"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
</head>
<body>
<script type="text/javascript">
var map; //Map variable
var geocoder; //Geocoder variable
var infowindow;
//var marker; //Marker variable
//Options variable
var myOptions = {
              zoom: 2,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              disableDefaultUI: true,
            }; 
var LatLngList = [];

//Geocoder function
function myGeocode() {
    infowindow = new google.maps.InfoWindow({
        maxWidth: 200
    });
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    geocoder = new google.maps.Geocoder();
    var titles = [
        'Anne of Cleves House',
        'Lewes Castle',
        'Michelham Priory',
        'Fishbourne Roman Palace & Gardens',
        'Marlipins Museum','The Priest House',
        'The Long Man'
        ];

    var addresses =[
        'Anne of Cleves House, 52, Southover High St, Lewes, BN7 1JA',
        'Barbican House Museum, 169, High Street, Lewes, BN7 1YE',
        'Michelham Priory, Upper Dicker, Hailsham, East Sussex, BN27 3QS',
        'Fishbourne Roman Palace, Roman Way, Fishbourne, West Sussex, PO19 3QR',
        'Marlipins Museum, High Street, Shoreham-by-Sea, West Sussex, BN43 5DA',
        'The Priest House, North Lane, West Hoathly, West Sussex, RH19 4PP',
        'The long man of wilmington'
    ];

    var descriptions = [
        'Anne of Cleves House you can explore how the Tudors and Elizabethans lived, worked and relaxed at home.',
        'Climb to the top of this 1000 year old Norman Castle for stunning panoramic views across Sussex.',
        'England\'s longest water filled moat surrounds the site which dates back to 1229.',
        'Welcome to the largest Roman home in Britain',
        'The striking chequerboard flint and Caen limestone facade is part of one of the oldest Norman buildings in Sussex.',
        'The only one of its kind open to the public, this beautiful 15th century Wealden hall house stands in a traditional cottage garden.',
        'the long man of wilmington'
    ];
    var markers = [];
     //private function, only need be defined once!
    function getGeocode(address, title, description) {
        geocoder.geocode( {"address": address }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                latlng = results[0].geometry.location;
                LatLngList.push(latlng);
                map.setCenter(latlng);
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map
                    //title: title,
                }); 
                markers.push(marker);
                google.maps.event.addListener(marker, "click", function () {
                    infowindow.setContent("<div class='map-infowindow'><h4 class='gm-title'>"+title+"</h4>"+description+"'<a class='gm-directions' href='http://maps.google.com/maps?saddr="+address+"'>Get directions</a></div>");
                    infowindow.open(map, marker);
                });
                if (markers.length == addresses.length) { //we have received all of our geocoder responses
                    alert(markers);
                    var markerCluster = new MarkerClusterer(map, markers);
                    //  Create a new viewpoint bound
                    var bounds = new google.maps.LatLngBounds ();
                    //  Go through each...
                    for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) {
                        //  And increase the bounds to take this point
                        bounds.extend (LatLngList[i]);
                    }
                    //  Fit these bounds to the map
                    map.fitBounds (bounds);
                }
            } else {
                document.getElementById("text_status").value = status;
            }
        });//end of geocoder
    }
    for (var i = 0; i < addresses.length; i++) { 
        var address = addresses[i];
        var title = titles[i];
        var description = descriptions[i];
        //var alink = links[i];
         //put our private function to work:
        getGeocode(address, title, description);
    }//end of for loop
}

window.onload=myGeocode;
</script>
<div id="map_canvas" style="width:600px; height:600px;"></div>  
</body>
</html>


无标题文件
var-map；//映射变量
var geocoder；//geocoder变量
var信息窗口；
//var marker；//标记变量
//选项变量
变量myOptions={
缩放：2，
mapTypeId:google.maps.mapTypeId.ROADMAP，
disableDefaultUI:true，
}; 
var LatLngList=[]；
//地理编码器功能
函数myGeocode（）{
infowindow=新建google.maps.infowindow({
最大宽度：200
});
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
geocoder=新的google.maps.geocoder（）；
变量标题=[
“克利夫家的安妮”，
“路易斯城堡”，
“米开勒姆修道院”，
“菲什伯恩罗马宫殿和花园”，
“马立宾博物馆”，“牧师之家”，
“长男人”
];
变量地址=[
“克利夫家的安妮，52号，路易斯南上方高街，BN7 1JA”，
“巴比肯之家博物馆，169号，路易斯大街，BN7 1YE”，
“Michelham修道院，上迪克尔，海尔舍姆，东苏塞克斯，BN27 3QS”，
“菲什伯恩罗马宫殿，罗马路，菲什伯恩，西苏塞克斯，第19页3QR”，
“马立宾博物馆，高街，海岸
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;ver=3.5.1"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
</head>
<body>
<script type="text/javascript">
var map; //Map variable
var geocoder; //Geocoder variable
var infowindow;
//var marker; //Marker variable
//Options variable
var myOptions = {
              zoom: 2,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              disableDefaultUI: true,
            }; 
var LatLngList = [];

//Geocoder function
function myGeocode() {
    infowindow = new google.maps.InfoWindow({
        maxWidth: 200
    });
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    geocoder = new google.maps.Geocoder();
    var titles = [
        'Anne of Cleves House',
        'Lewes Castle',
        'Michelham Priory',
        'Fishbourne Roman Palace & Gardens',
        'Marlipins Museum','The Priest House',
        'The Long Man'
        ];

    var addresses =[
        'Anne of Cleves House, 52, Southover High St, Lewes, BN7 1JA',
        'Barbican House Museum, 169, High Street, Lewes, BN7 1YE',
        'Michelham Priory, Upper Dicker, Hailsham, East Sussex, BN27 3QS',
        'Fishbourne Roman Palace, Roman Way, Fishbourne, West Sussex, PO19 3QR',
        'Marlipins Museum, High Street, Shoreham-by-Sea, West Sussex, BN43 5DA',
        'The Priest House, North Lane, West Hoathly, West Sussex, RH19 4PP',
        'The long man of wilmington'
    ];

    var descriptions = [
        'Anne of Cleves House you can explore how the Tudors and Elizabethans lived, worked and relaxed at home.',
        'Climb to the top of this 1000 year old Norman Castle for stunning panoramic views across Sussex.',
        'England\'s longest water filled moat surrounds the site which dates back to 1229.',
        'Welcome to the largest Roman home in Britain',
        'The striking chequerboard flint and Caen limestone facade is part of one of the oldest Norman buildings in Sussex.',
        'The only one of its kind open to the public, this beautiful 15th century Wealden hall house stands in a traditional cottage garden.',
        'the long man of wilmington'
    ];
    var markers = [];
     //private function, only need be defined once!
    function getGeocode(address, title, description) {
        geocoder.geocode( {"address": address }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                latlng = results[0].geometry.location;
                LatLngList.push(latlng);
                map.setCenter(latlng);
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map
                    //title: title,
                }); 
                markers.push(marker);
                google.maps.event.addListener(marker, "click", function () {
                    infowindow.setContent("<div class='map-infowindow'><h4 class='gm-title'>"+title+"</h4>"+description+"'<a class='gm-directions' href='http://maps.google.com/maps?saddr="+address+"'>Get directions</a></div>");
                    infowindow.open(map, marker);
                });
                if (markers.length == addresses.length) { //we have received all of our geocoder responses
                    alert(markers);
                    var markerCluster = new MarkerClusterer(map, markers);
                    //  Create a new viewpoint bound
                    var bounds = new google.maps.LatLngBounds ();
                    //  Go through each...
                    for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) {
                        //  And increase the bounds to take this point
                        bounds.extend (LatLngList[i]);
                    }
                    //  Fit these bounds to the map
                    map.fitBounds (bounds);
                }
            } else {
                document.getElementById("text_status").value = status;
            }
        });//end of geocoder
    }
    for (var i = 0; i < addresses.length; i++) { 
        var address = addresses[i];
        var title = titles[i];
        var description = descriptions[i];
        //var alink = links[i];
         //put our private function to work:
        getGeocode(address, title, description);
    }//end of for loop
}

window.onload=myGeocode;
</script>
<div id="map_canvas" style="width:600px; height:600px;"></div>  
</body>
</html>