如何处理在同一个cooridnates出席的多个标记 [英] How to handle Multiple Markers present at the same cooridnates

查看:127
本文介绍了如何处理在同一个cooridnates出席的多个标记的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

这是我的小提琴



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({});

函数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();
}

函数addMarker(){
for(var i = 0; i< markers.length; i ++){
//获得每个属性的属性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:坐标:+ lat +, + lng +| Trailhead名称:+ 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个标记 ?? 在这种情况下,您需要轻微移动每个标记,以便它们不会互相重叠,for表示有更多标记分组你可以使用一个标记集群
,你可以在StackOverflow中看到很多例子

添加简单的标记群集到谷歌地图
,你可以在里面看到一个有用的jsfiddl


I have got multiple markers at the same position (the longitude and latitude)

This is my fiddle

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

This is my code

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;

Right now , this is showing only one Marker , could you please let me know how to handle this ??

Means how can i handle it to show , so that it shows all 3 markers ??

解决方案

In this case you need to move slightly each marker so that they do not overlap each other and the for indicate that there are more marker grouped you can use a marker cluster you can see many examples in StackOverflow

Adding simple marker clusterer to google map and you can see inside a useful jsfiddl

这篇关于如何处理在同一个cooridnates出席的多个标记的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆