【问题标题】:How to handle Multiple Markers present at the same coordinates如何处理存在于同一坐标的多个标记
【发布时间】:2015-08-02 00:09:54
【问题描述】:

我在同一位置有多个标记(经度和纬度)

这是我的小提琴:

http://jsfiddle.net/ZLuTg/1014/

这是我的代码:

var map;
var global_markers = [];    
var markers = [[37.09024, -95.712891, 'trialhead0'], [37.09024, -95.712891, 'trialhead1'], [37.09024, -95.712892, 'trialhead2']];

var infowindow = new google.maps.InfoWindow({});

function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(40.77627, -73.910965);
    var myOptions = {
        zoom: 1,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    addMarker();
}

function addMarker() {
    for (var i = 0; i < markers.length; i++) {
        // obtain the attribues of each marker
        var lat = parseFloat(markers[i][0]);
        var lng = parseFloat(markers[i][1]);
        var trailhead_name = markers[i][2];

        var myLatlng = new google.maps.LatLng(lat, lng);

        var contentString = "<html><body><div><p><h2>" + trailhead_name + "</h2></p></div></body></html>";

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: "Coordinates: " + lat + " , " + lng + " | Trailhead name: " + trailhead_name
        });

        marker['infowindow'] = contentString;

        global_markers[i] = marker;

        google.maps.event.addListener(global_markers[i], 'click', function() {
            infowindow.setContent(this['infowindow']);
            infowindow.open(map, this);
        });
    }
}

window.onload = initialize;

目前,这仅显示一个标记,您能告诉我如何处理吗?

表示如何处理它以显示,以便显示所有 3 个标记

【问题讨论】:

标签: google-maps


【解决方案1】:

在这种情况下,您需要稍微移动每个标记,以便它们不会相互重叠,并且 for 表示有更多标记分组,您可以使用标记簇 你可以在 StackOverflow 中看到很多例子

Adding simple marker clusterer to google map 你可以在里面看到一个有用的jsfiddl

【讨论】:

    猜你喜欢
    • 2016-07-27
    • 2015-08-06
    • 2020-06-05
    • 1970-01-01
    • 2012-04-24
    • 1970-01-01
    • 1970-01-01
    • 2015-02-14
    • 1970-01-01
    相关资源
    最近更新 更多