Google Maps V3 - 以间隔放置标记和折线 [英] Google Maps V3- Place marker and polyline with interval
本文介绍了Google Maps V3 - 以间隔放置标记和折线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我一直在尝试几个小时，并且在这个论坛上提到了一个帖子，但是失败了。我有大量的标记，地图上最多有1000个标记。当我尝试移动地图的位置时，它会减慢我的地图。所以我需要设置地图上显示的标记间隔。比方说有超过300个标记的时候间隔10。我怎样才能做到这一点？以下是我的代码：
var trace_markers = [];
var pins = [];
var pin;
函数Trace_Pin（Lat，Long，immat，type，site，vitesse，date）{
pin = {
latitude：document.getElementById（'Lat'），
longitude： document.getElementById（'long'），
immat：document.getElementById（'immat'），
date：document.getElementById（'date'），
type：document.getElementById（'类型'），
site：document.getElementById（'site'），
速度：document.getElementById（'vitesse'）
};
pins.push（pin）;
ListPin（）;}
函数ListPin（）
{
var image_trace = new google.maps.MarkerImage（'http://maps.google.com /mapfiles/kml/pal3/icon61.png'，
新增google.maps.Size（32，32），
新增google.maps.Point（0,0），
新增谷歌.maps.Point（16，16））;
if（pins.length> 200）{
for（var i = 0; i
var trace_marker = new google.maps.Marker（{
map：map，
position：vehlatlng，
icon：image_trace}）;
trace_marker.tooltip_html ='< div class =tooltip>'+'日期：'+ pins [i] .date +'< br>'+'Vitesse：'+ pins [i]。 vitesse +'km / h'+'< br>'+'< \ / div>';
trace_markers.push（trace_marker）;
trace_marker.setMap（map）;
Liste_Points.push（trace_marker.getPosition（））;
TraceBounds.extend（trace_marker.position）; }（$ i
$ if（pins.length <200）{
for（var i = 0; i
var trace_marker = new google.maps.Marker（{
map：map，
position：vehlatlng，
icon：image_trace}）;
trace_marker.tooltip_html ='< div class =tooltip>'+'日期：'+ pins [i] .date +'< br>'+'Vitesse：'+ pins [i]。 vitesse +'km / h'+'< br>'+'< \ / div>';
trace_markers.push（trace_marker）;
trace_marker.setMap（map）;
Liste_Points.push（trace_marker.getPosition（））;
TraceBounds.extend（trace_marker.position）; }
}
// Evenement MouseOver
// ------------------------------ -----------------------
google.maps.event.addListener（map，'mouseover'，function（）{
showTooltip （trace_marker）;
}）;
}
// --------------------------------------- ---------------------------------------------
/ / ******************* *************************************
//在联合les points du parcours
// ********************************************* *****************************************
// --- -------------------------------------------------- -------------------------------
函数Trace_Route（）{
if（route）{route .setMap（NULL）; }
if（Liste_Points.length> 1）{
route = new google.maps.Polyline（{
path：Liste_Points，
strokeColor：＃FF0000，
strokeOpacity：1.0，
strokeWeight：2}）;
route.setMap（map）;
code $ <$ $ p
解决方案创建一个拥有所有标记的数组（其中300个）。
让我们假设它叫做
allMarkersArray []
创建标记时，您不设置地图，但将其保留为空，以便它不会显示在地图上。当你想显示标记时，你需要做一些数学计算。假设你只想显示1/30（标记为300）中的1/30。你创建另一个数组
shownMarketsArray []
在哪里放置要显示的标记，以及何时将它们放置在那里，即可设置地图
marker.setMap（map）
现在将显示哪些标记的条件，以及哪些标记将保持隐藏取决于你。如果你想让1/30的标记只有一个for循环，那么
pre $ for（var i = 0; i< allMarketsArray .length / 30; i ++）
您应该采取一些预防措施（即阵列太小，您希望显示所有这些内容）。
更新
if（pins.length> 200）{
for（var i = 0; i
var trace_marker = new google.maps.Marker（{
map：map，
position：vehlatlng，
icon：image_trace}）;
trace_marker.tooltip_html ='< div class =tooltip>'+'日期：'+ pins [i] .date +'< br>'+'Vitesse：'+ pins [i]。 vitesse +'km / h'+'< br>'+'< \ / div>';
trace_markers.push（trace_marker）;
trace_marker [i] .setMap（map）;
Liste_Points.push（trace_marker.getPosition（））;
TraceBounds.extend（trace_marker.position）; }（$ i
$ if（pins.length <200）{
for（var i = 0; i
var trace_marker = new google.maps.Marker（{
map：map，
position：vehlatlng，
icon：image_trace}）;
trace_marker.tooltip_html ='< div class =tooltip>'+'日期：'+ pins [i] .date +'< br>'+'Vitesse：'+ pins [i]。 vitesse +'km / h'+'< br>'+'< \ / div>';
trace_markers.push（trace_marker）;
trace_marker [i] .setMap（map）;
Liste_Points.push（trace_marker.getPosition（））;
TraceBounds.extend（trace_marker.position）; }
}
I have been trying for hours and also referred to a post in this forum but failed. I have a large number of markers, up to 1000 markers on the map. It slows down my map when I try to move the map's position. So I need to set an interval of markers to be shown on the map. Let's say with interval of 10 when there are more than 300 markers. How can I do that? Below is my code :
var trace_markers= [];
var pins = [];
var pin;
function Trace_Pin(Lat, Long, immat, type, site, vitesse, date){
pin = {
latitude: document.getElementById('Lat'),
longitude: document.getElementById('Long'),
immat: document.getElementById('immat'),
date: document.getElementById('date'),
type: document.getElementById('type'),
site: document.getElementById('site'),
speed: document.getElementById('vitesse')
};
pins.push(pin);
ListPin();}
function ListPin()
{
var image_trace = new google.maps.MarkerImage('http://maps.google.com/mapfiles/kml/pal3/icon61.png',
new google.maps.Size(32, 32),
new google.maps.Point(0,0),
new google.maps.Point(16, 16));
if (pins.length > 200){
for ( var i=0; i< pins.length ;i+10){
var vehlatlng = new google.maps.LatLng(pins[i].latitude, pins[i].longitude) ;
var trace_marker = new google.maps.Marker({
map: map,
position: vehlatlng,
icon: image_trace });
trace_marker.tooltip_html = '<div class="tooltip">' + 'Date : ' + pins[i].date + '<br>' + 'Vitesse : ' + pins[i].vitesse + ' km/h' + '<br>' + '<\/div>';
trace_markers.push(trace_marker);
trace_marker.setMap(map);
Liste_Points.push(trace_marker.getPosition());
TraceBounds.extend(trace_marker.position); }
}
if (pins.length < 200){
for ( var i=0;i< pins.length ;i++){
var vehlatlng = new google.maps.LatLng(pins[i].latitude, pins[i].longitude) ;
var trace_marker = new google.maps.Marker({
map: map,
position: vehlatlng,
icon: image_trace });
trace_marker.tooltip_html = '<div class="tooltip">' + 'Date : ' + pins[i].date + '<br>' + 'Vitesse : ' + pins[i].vitesse + ' km/h' + '<br>' + '<\/div>';
trace_markers.push(trace_marker);
trace_marker.setMap(map);
Liste_Points.push(trace_marker.getPosition());
TraceBounds.extend(trace_marker.position); }
}
// Evenement MouseOver
//-----------------------------------------------------
google.maps.event.addListener(map, 'mouseover', function() {
showTooltip(trace_marker);
});
}
// ------------------------------------------------------------------------------------
//**************************************************************************************
// On joint les points du parcours
//**************************************************************************************
// ------------------------------------------------------------------------------------
function Trace_Route() {
if (route) { route.setMap(null); }
if (Liste_Points.length > 1) {
route = new google.maps.Polyline({
path: Liste_Points,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2});
route.setMap(map);
}
}
解决方案
Create an array where you have all your markers (300 of them). Lets assume that is called
allMarkersArray[]
When you create a marker you do not set the map, but you leave it null so it won't be shown on the map. When you want to show the markers you do some math. Lets say that you want to show only the 1/30 (10 out of 300) of the markers. You create another array
shownMarketsArray[]
where you place the markers you want to show and when you put them there you set the map
marker.setMap(map)
Now the criteria of which markers will be shown, and which markers will remain hidden are up to you. If you want the 1/30 of the markers just have a for loop
for(var i = 0; i < allMarketsArray.length/30; i++)
You should take some precautions though (i.e. the array is too small and you want to show all of them).
UPDATE
if (pins.length > 200){
for ( var i=0; i< pins.length ;i+10){
var vehlatlng = new google.maps.LatLng(pins[i].lat, pins[i].long) ;
var trace_marker = new google.maps.Marker({
map: map,
position: vehlatlng,
icon: image_trace });
trace_marker.tooltip_html = '<div class="tooltip">' + 'Date : ' + pins[i].date + '<br>' + 'Vitesse : ' + pins[i].vitesse + ' km/h' + '<br>' + '<\/div>';
trace_markers.push(trace_marker);
trace_marker[i].setMap(map);
Liste_Points.push(trace_marker.getPosition());
TraceBounds.extend(trace_marker.position); }
}
if (pins.length < 200){
for ( var i=0;i< pins.length ;i++){
var vehlatlng = new google.maps.LatLng(pins[i].lat, pins[i].long) ;
var trace_marker = new google.maps.Marker({
map: map,
position: vehlatlng,
icon: image_trace });
trace_marker.tooltip_html = '<div class="tooltip">' + 'Date : ' + pins[i].date + '<br>' + 'Vitesse : ' + pins[i].vitesse + ' km/h' + '<br>' + '<\/div>';
trace_markers.push(trace_marker);
trace_marker[i].setMap(map);
Liste_Points.push(trace_marker.getPosition());
TraceBounds.extend(trace_marker.position); }
}
这篇关于Google Maps V3 - 以间隔放置标记和折线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
