通过折线连接标记组 [英] connect groups of marker by polyline
本文介绍了通过折线连接标记组的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有两组标记：pos和dax？
是否可以使用谷歌的函数Polyline连接两组标记？
第一组：pos1，pos2，pos3，pos4。
第二次gropup：dax1，dax2。
页面上的标记每10秒刷新一次。 >我将非常感谢任何帮助。
<！DOCTYPE html>
< html>
< head>
< title> TODO提供标题< / title>
< meta charset =UTF-8>
< meta name =viewportcontent =width = device-width，initial-scale = 1.0>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js>< / script>
< script src =https://maps.googleapis.com/maps/api/js>< / script>
< script>
var centerLat;
var centerLng;
var mapOfSalons;
var markers = [];
函数ajax（）{
var ajaxArray = [];
ajaxArray [0] = {lat：50.22，lng：19.22，text：pos1};
ajaxArray [1] = {lat：49.00，lng：19.88，text：pos2};
ajaxArray [2] = {lat：49.40，lng：21.22，text：pos3};
ajaxArray [3] = {lat：49.90，lng：21.66，text：pos4};
ajaxArray [0] .lat = Math.random（）;
ajaxArray [2] .lat = Math.random（）;
返回ajaxArray;
}
函数ajax2（）{
var ajaxArray2 = [];
ajaxArray2 [0] = {lat：20.22，lng：19.22，text：dax1};
ajaxArray2 [1] = {lat：20.00，lng：24.88，text：dax2};
ajaxArray2 [0] .lat = Math.random（）+ 20;
返回ajaxArray2;
$ b $（document）.ready（function（）{
onStart（）;
}）;
函数clearOverlays（）{
for（var i = 0; i< markers.length; i ++）{
markers [i] .setMap（null ）;
}
markers.length = 0;
}
函数onStart（）{
centerLat = 50.22;
centerLng = 21.22;
var mapProp = {
center：new google.maps.LatLng（centerLat，centerLng），
zoom：8，
mapTypeId：google.maps.MapTypeId。 ROADMAP
};
mapOfSalons = new google.maps.Map（document.getElementById（googleMap），mapProp）;
initialize（）;
}
函数drwaUserRoad（数据，颜色）{
polly = new google.maps.Polyline {
strokeColor：color，
strokeOpacity：1.0，
strokeWeight：3
}）;
polly.setMap（mapOfSalons）;
for（i = 0; i< data.length; ++ i）{
var marker = new google.maps.Marker（{
position：new google。 maps.LatLng（data [i] .lat，data [i] .lng），
map：mapOfSalons，
title：data [i] .text
}）;
markers.push（marker）;
函数initialize（）{
clearOverlays（）;
var data = ajax（）;
var data2 = ajax2（）;
drwaUserRoad（数据，'＃000000'）;
drwaUserRoad（data2，'＃FF00CC'）;
setTimeout（initialize，10000）;
}
< / script>
< / head>
< body style =margin：0 auto;>
< div id =googleMapstyle =width：100％; height：100vh;>< / div>
< / body>
< / html>
解决方案
是的，这是可能的。
代码段：
$ b
var centerLat; var centerLng; var mapOfSalons; var markers = []; var polly = new google.maps.Polyline（{strokeColor：'＃000000'，strokeOpacity：1.0，strokeWeight：3}）; var polly2 = new google.maps.Polyline（{strokeColor：'＃FF00CC'，strokeOpacity ：1.0，strokeWeight：3}）; function ajax（）{var ajaxArray = []; ajaxArray [0] = {lat：50.22，lng：19.22，text：pos1}; ajaxArray [1] = {lat：49.00，lng：19.88，text：pos2}; ajaxArray [2] = {lat：49.40，lng：21.22，text：pos3}; ajaxArray [3] = {lat：49.90，lng：21.66，text：pos4}; ajaxArray [0] .lat = Math.random（）* 49; ajaxArray [2] .lat = Math.random（）* 49;返回ajaxArray;}函数ajax2（）{var ajaxArray2 = []; ajaxArray2 [0] = {lat：20.22，lng：19.22，text：dax1}; ajaxArray2 [1] = {lat：20.00，lng：24.88，text：dax2}; ajaxArray2 [0] .lat = Math.random（）* 20;函数clearOverlays（）{for（var i = 0; i< markers.length; i ++）{markers [i] .setMap （空值）; } marker = [];} function onStart（）{centerLat = 20.22; centerLng = 21.22; var mapProp = {center：new google.maps.LatLng（centerLat，centerLng），zoom：3，mapTypeId：google.maps.MapTypeId.ROADMAP}; mapOfSalons = new google.maps.Map（document.getElementById（googleMap），mapProp）;初始化（）;}函数drwaUserRoad（poly，data，color）{if（poly& poly.setMap）{poly.setMap（null）; poly.setPath（[]）; } else {poly = new google.maps.Polyline（{strokeColor：color，strokeOpacity：1.0，strokeWeight：3}）; } var path = [];对于（i = 0; i< data.length; ++ i）{var marker = new google.maps.Marker（{position：new google.maps.LatLng（data [i] .lat，data [i]）。 lng），map：mapOfSalons，title：data [i] .text}）; path.push（marker.getPosition（））; markers.push（标记）; } poly.setPath（path）; poly.setMap（mapOfSalons）;} function initialize（）{clearOverlays（）; var data = ajax（）; var data2 = ajax2（）; drwaUserRoad（polly，data，'＃000000'）; drwaUserRoad（polly2，data2，'＃FF00CC'）; setTimeout（initialize，10000）;}
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< script src =https://maps.googleapis.com / maps / api / js>< / script>< body style =margin：0 auto;> < div id =googleMapstyle =width：100％; height：100vh;>< / div>< / body>
I have two groups of markers: pos and dax? is it possible to connect markers in two groups using google's function Polyline ? First group : pos1, pos2, pos3, pos4. Second gropup: dax1, dax2.
The markers on the page are refreshing per 10sec.
I will be very grateful for any help.
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
var centerLat;
var centerLng;
var mapOfSalons;
var markers = [];
function ajax() {
var ajaxArray = [];
ajaxArray[0] = { "lat": "50.22", "lng": "19.22", "text": "pos1"};
ajaxArray[1] = { "lat": "49.00", "lng": "19.88", "text": "pos2"};
ajaxArray[2] = { "lat": "49.40", "lng": "21.22", "text": "pos3"};
ajaxArray[3] = { "lat": "49.90", "lng": "21.66", "text": "pos4"};
ajaxArray[0].lat = Math.random();
ajaxArray[2].lat = Math.random();
return ajaxArray;
}
function ajax2() {
var ajaxArray2 = [];
ajaxArray2[0] = { "lat": "20.22", "lng": "19.22", "text": "dax1"};
ajaxArray2[1] = { "lat": "20.00", "lng": "24.88", "text": "dax2"};
ajaxArray2[0].lat = Math.random() + 20;
return ajaxArray2;
}
$( document ).ready(function() {
onStart();
});
function clearOverlays() {
for (var i = 0; i < markers.length; i++ ) {
markers[i].setMap(null);
}
markers.length = 0;
}
function onStart() {
centerLat = 50.22;
centerLng = 21.22;
var mapProp = {
center:new google.maps.LatLng(centerLat, centerLng),
zoom: 8,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
mapOfSalons = new google.maps.Map(document.getElementById("googleMap"),mapProp);
initialize();
}
function drwaUserRoad(data, color) {
polly = new google.maps.Polyline({
strokeColor: color,
strokeOpacity: 1.0,
strokeWeight: 3
});
polly.setMap(mapOfSalons);
for(i = 0; i < data.length; ++i) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data[i].lat, data[i].lng),
map: mapOfSalons,
title: data[i].text
});
markers.push(marker);
}
}
function initialize() {
clearOverlays();
var data = ajax();
var data2 = ajax2();
drwaUserRoad(data, '#000000');
drwaUserRoad(data2, '#FF00CC');
setTimeout(initialize, 10000);
}
</script>
</head>
<body style="margin: 0 auto;">
<div id="googleMap" style="width:100%;height:100vh;"></div>
</body>
</html>
解决方案
Yes, it is possible.
code snippet:
var centerLat;
var centerLng;
var mapOfSalons;
var markers = [];
var polly = new google.maps.Polyline({
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
});
var polly2 = new google.maps.Polyline({
strokeColor: '#FF00CC',
strokeOpacity: 1.0,
strokeWeight: 3
});
function ajax() {
var ajaxArray = [];
ajaxArray[0] = {
"lat": "50.22",
"lng": "19.22",
"text": "pos1"
};
ajaxArray[1] = {
"lat": "49.00",
"lng": "19.88",
"text": "pos2"
};
ajaxArray[2] = {
"lat": "49.40",
"lng": "21.22",
"text": "pos3"
};
ajaxArray[3] = {
"lat": "49.90",
"lng": "21.66",
"text": "pos4"
};
ajaxArray[0].lat = Math.random() * 49;
ajaxArray[2].lat = Math.random() * 49;
return ajaxArray;
}
function ajax2() {
var ajaxArray2 = [];
ajaxArray2[0] = {
"lat": "20.22",
"lng": "19.22",
"text": "dax1"
};
ajaxArray2[1] = {
"lat": "20.00",
"lng": "24.88",
"text": "dax2"
};
ajaxArray2[0].lat = Math.random() * 20;
return ajaxArray2;
}
$(document).ready(function() {
onStart();
});
function clearOverlays() {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
marker = [];
}
function onStart() {
centerLat = 20.22;
centerLng = 21.22;
var mapProp = {
center: new google.maps.LatLng(centerLat, centerLng),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
mapOfSalons = new google.maps.Map(document.getElementById("googleMap"), mapProp);
initialize();
}
function drwaUserRoad(poly, data, color) {
if (poly && poly.setMap) {
poly.setMap(null);
poly.setPath([]);
} else {
poly = new google.maps.Polyline({
strokeColor: color,
strokeOpacity: 1.0,
strokeWeight: 3
});
}
var path = [];
for (i = 0; i < data.length; ++i) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data[i].lat, data[i].lng),
map: mapOfSalons,
title: data[i].text
});
path.push(marker.getPosition());
markers.push(marker);
}
poly.setPath(path);
poly.setMap(mapOfSalons);
}
function initialize() {
clearOverlays();
var data = ajax();
var data2 = ajax2();
drwaUserRoad(polly, data, '#000000');
drwaUserRoad(polly2, data2, '#FF00CC');
setTimeout(initialize, 10000);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<body style="margin: 0 auto;">
<div id="googleMap" style="width:100%;height:100vh;"></div>
</body>
这篇关于通过折线连接标记组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
