如何处理在相同位置精确呈现的标记 [英] How to handle markers exact present at the same location
问题描述
我正在使用Google地图来显示数据库中的数据。
我还需要显示可用的标记，我面临的问题是有时标记数据存在于相同的坐标处。
这个是我的小提琴
在这种情况下，我该如何显示，点击它时我的标记??
这是我的代码
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（）;
markerCluster = new MarkerClusterer（map，global_markers）;
}
函数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;
global_markers.push（marker）;
google.maps.event.addListener（global_markers [i]，'click'，function（）{
infowindow.setContent（this ['infowindow']）;
infowindow.open（map ，this）;
}）;
}
}
var markerCluster;
window.onload =初始化;
在这种情况下，您需要稍微移动每个标记它们不互相重叠，for表示有更多的标记分组，您可以使用标记集群
，您可以在StackOverflow中看到许多示例
< a href =https://stackoverflow.com/questions/5258553/adding-simple-marker-clusterer-to-google-map]>添加简单的标记群集到谷歌地图
，你可以在里面看到一个有用的jsfiddl
I am using google Maps to display my data present in Database . I also needs to show Markers available , the issue i am facing is that sometimes the Marker data is present at the same coordinates .
This is my fiddle
In this case , how can i show , my markers when clicked on it ??
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();
markerCluster = new MarkerClusterer(map, global_markers);
}
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;
global_markers.push(marker);
google.maps.event.addListener(global_markers[i], 'click', function() {
infowindow.setContent(this['infowindow']);
infowindow.open(map, this);
});
}
}
var markerCluster;
window.onload = initialize;
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
这篇关于如何处理在相同位置精确呈现的标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
