在 Google 地图上的多个标记之间画线
Draw Lines between Multiple markers on Google Map
我对 JavaScript 和 Google 地图有点陌生。我正在尝试在我的多个位置之间画线。
我正在关注这个 。
我的代码是这样的
<script type="text/javascript">
function pinSymbol(color) {
return {
path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
fillColor: color,
fillOpacity: 1,
strokeColor: '#000',
strokeWeight: 2,
scale: 2
};
}
$.ajax({
type:'get',
url:'https://example.com/info.php',
data:{
},
dataType:'json',
success:function(result){
var UserLatitude;
var UserLongitude;
var color = "red";
var last ;
var MyData = result['Result'];
var InformationArray = [];
var LocationArray = [];
for(var i=0; i<MyData.length; i++){
var UserLatitude = parseFloat(MyData[i]['UserLatitude']);
var UserLongitude = parseFloat(MyData[i]['UserLongitude']);
var LastTrackedOn = MyData[i]['LastTrackedOn'];
var InSchoolLocation = MyData[i]['InSchoolLocation'];
InformationArray.push([ LastTrackedOn, UserLatitude, UserLongitude, InSchoolLocation ]);
LocationArray.push([UserLatitude,UserLongitude]);
}
console.log(InformationArray);
console.log(LocationArray);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: new google.maps.LatLng(21.947275, 71.720822222)
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < InformationArray.length; i++) {
var color = "red";
if(InformationArray[i][3] == true){
color= "green";
}
marker = new google.maps.Marker({
position: new google.maps.LatLng(LocationArray[i][0], LocationArray[i][1]),
map: map,
icon: pinSymbol(color)
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent("Tracked On: "+InformationArray[i][0]+ " ");
infowindow.open(map, marker);
}
})(marker, i));
}
var line= new google.maps.Polyline({
path: LocationArray,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
line.setMap(map);
}
});
</script>
它的显示位置很好,没有问题。它只是不划清界限。我收到如下错误
InvalidValueError: at index 0: not a LatLng or LatLngLiteral with finite coordinates: in property lat: not a number
我不知道我应该怎么做才能解决这个问题。让我知道这里是否有专家可以帮助我。谢谢!
您应该构建一个合适的 LatLng Obj
LocationArray.push(new google.maps.LatLng(UserLatitude, UserLongitude));
我对 JavaScript 和 Google 地图有点陌生。我正在尝试在我的多个位置之间画线。
我正在关注这个
我的代码是这样的
<script type="text/javascript">
function pinSymbol(color) {
return {
path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
fillColor: color,
fillOpacity: 1,
strokeColor: '#000',
strokeWeight: 2,
scale: 2
};
}
$.ajax({
type:'get',
url:'https://example.com/info.php',
data:{
},
dataType:'json',
success:function(result){
var UserLatitude;
var UserLongitude;
var color = "red";
var last ;
var MyData = result['Result'];
var InformationArray = [];
var LocationArray = [];
for(var i=0; i<MyData.length; i++){
var UserLatitude = parseFloat(MyData[i]['UserLatitude']);
var UserLongitude = parseFloat(MyData[i]['UserLongitude']);
var LastTrackedOn = MyData[i]['LastTrackedOn'];
var InSchoolLocation = MyData[i]['InSchoolLocation'];
InformationArray.push([ LastTrackedOn, UserLatitude, UserLongitude, InSchoolLocation ]);
LocationArray.push([UserLatitude,UserLongitude]);
}
console.log(InformationArray);
console.log(LocationArray);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: new google.maps.LatLng(21.947275, 71.720822222)
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < InformationArray.length; i++) {
var color = "red";
if(InformationArray[i][3] == true){
color= "green";
}
marker = new google.maps.Marker({
position: new google.maps.LatLng(LocationArray[i][0], LocationArray[i][1]),
map: map,
icon: pinSymbol(color)
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent("Tracked On: "+InformationArray[i][0]+ " ");
infowindow.open(map, marker);
}
})(marker, i));
}
var line= new google.maps.Polyline({
path: LocationArray,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
line.setMap(map);
}
});
</script>
它的显示位置很好,没有问题。它只是不划清界限。我收到如下错误
InvalidValueError: at index 0: not a LatLng or LatLngLiteral with finite coordinates: in property lat: not a number
我不知道我应该怎么做才能解决这个问题。让我知道这里是否有专家可以帮助我。谢谢!
您应该构建一个合适的 LatLng Obj
LocationArray.push(new google.maps.LatLng(UserLatitude, UserLongitude));