google-maps-markers - 我在我的代码中在谷歌地图中加载多个标记时遇到困难,在我的代码中只有一个标记将加载到 gmap 中,请给我解决方案

标签 google-maps-markers markerclusterer

<script type="text/javascript">
    var map;
    var mc; //marker clusterer
    var mcOptions = { gridSize: 10, maxZoom: 8 };
    var infowindow = new google.maps.InfoWindow(); //global infowindow
    var geocoder = new google.maps.Geocoder(); //geocoder

    var address = new Array("15.8700, 74.5000", "15.871463, 74.500777", "15.871505, 74.500884", "32.7714,-97.2915");`enter code here`
    var content = new Array("Unit`enter code here`No1", "UnitNo42", "UnitNo43", "UnitNo44");

    //min and max limits for multiplier, for random numbers //keep the range pretty small, so markers are kept close by
    var min = .999999;
    var max = 1.000001;

    function createMarker(latlng, text) {

        var marker = new google.maps.Marker({ position: latlng, map: map });

        ///get array of markers currently in cluster
        var allMarkers = mc.getMarkers();

        //check to see if any of the existing markers match the latlng of the new marker
        if (allMarkers.length != 0) {
            for (i = 0; i < allMarkers.length; i++) {
                var existingMarker = allMarkers[i];
                var pos = existingMarker.getPosition();

                if (latlng.equals(pos)) {
                    text = text + " & " + content[i];
                }
            }
        }
        // WHERE TO ADD: mc.addMarker(marker); //??

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.close();
            infowindow.setContent(text);
            infowindow.open(map, marker);
        });
        return marker;
    }


    function initialize() {
        var options = {
            zoom: 2,
            center: new google.maps.LatLng(21.7679, 78.8718),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map'), options);

        var gmarkers = [];
        for (i = 0; i < address.length; i++) {
            var ptStr = address[i];
            var coords = ptStr.split(",");
            var latlng = new google.maps.LatLng(parseFloat(coords[0]), parseFloat(coords[1]))
            gmarkers.push(createMarker(latlng, content[i]));
        }
        //marker cluster
        mc = new MarkerClusterer(map, gmarkers, mcOptions);
        for (i = 0; i < address.length; i++) {
            geocodeAddress(address[i], i);

        }
    }


</script>

最佳答案

var mapOptions = {
    center: new google.maps.LatLng(20, 77),
    zoom: 3,
    mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map_Google"), mapOptions);
var allmarkers = new Array(); ;

    var bounds = new google.maps.LatLngBounds();
    var infowindow = new google.maps.InfoWindow();
    var marker, i;
    for (i = 0; i < markers.length; i++) {

        if (allmarkers.length >= i + 1) {

        }
        else {
            var image = { url: markers[i][3] };
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(markers[i][1], markers[i][2]),
                map: map,
                icon: image,
                animation: google.maps.Animation.DROP, cursor: "default"
            });
            marker.mycategory = "Halla";
            allmarkers.push(marker);

            bounds.extend(marker.getPosition());
            google.maps.event.addListener(allmarkers[i], 'click', (function (allmarkers, i) {
                return function () {
                    //map.setZoom(21);
                    //map.setCenter(marker.getPosition());
                    infowindow.setContent(markers[i][0]);
                    infowindow.open(map, allmarkers[i]);
                }
            })
            (allmarkers, i));
    }
    map.fitBounds(bounds);
});

关于google-maps-markers - 我在我的代码中在谷歌地图中加载多个标记时遇到困难,在我的代码中只有一个标记将加载到 gmap 中,请给我解决方案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19090692/

相关文章:

javascript - 两个js文件加载完成后如何调用一个公共(public)函数?

android - Android 中用户当前位置图标覆盖的聚类标记

javascript - 在谷歌地图上按下鼠标以创建标记并立即拖动它而不释放鼠标按钮

Javascript Google Maps v3 API - 无法添加标记

java - Android Google map Api 在放大时不会取消聚类

google-maps-api-3 - Google Maps Api v3 - 新的 MarkerClusterer 运行速度太慢?

javascript - 谷歌地图 :Knowing what marker the event was fired for

javascript - 如何在 Reactjs 中嵌入谷歌地图上的确切位置

android - 谷歌地图自定义标记图标,在 Android 上具有集群功能

javascript - 鼠标悬停在标记簇对象上