如何在不影响折线的情况下刷新谷歌地图 [英] How do I refresh a google map without affecting polylines
问题描述
您正在使用Google地图开发项目。在此我想展示特定的车辆经度和纬度。并为每个lat和lng添加标记。并且还绘制折线。
现在我必须在5秒内刷新地图。在这个我的折线影响，没有显示良好。这是我的代码
var markers = [];
函数submit（）{
markers = [ ];
$ .ajax（{
url：/ map / GetLatitudeValues，
类型：'post'，
dataType：'json'，
// imei：null，
data：{imei：$（＃imei）。val（）}，
async：false，
成功：函数（数据）{
var Objects = data;
for（对象中的var键）{
markers.push（{lat：Objects [key] .Latitude，lng：Objects [key] .Longitude}）;
}
}，
错误：函数（XMLHttpRequest，textStatus，errorThrown）{
alert（状态：+ textStatus）;警报（错误：+ errorThrown）;
}
}）; loadmap（）;
setInterval（submit（），5000）;
// loadmap（）;
}
$（document）.ready（function（）{
}）;
function loadmap（）{
var mapOptions = {
center：new google.maps.LatLng（markers [0] .lat，markers [0] .lng），
zoom：10，
mapTypeId：google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map（document.getElementById（dvMap），mapOptions）;
var lat_lng = new Array（）;
var latlngbounds = new google.maps。 LatLngBounds（）;
for（i = 0; i< markers.length; i ++）{
var data = markers [i ]
var myLatlng = new google.maps.LatLng （data.lat，data.lng）;
lat_lng.push（myLatlng）;
var marker = new google.maps.Marker（{
位置：myLatlng，
地图：map
}）;
latlngbounds.extend（marker.position）;
（函数（标记，数据）{
var infoWindow = new google.maps.InfoWindow （{content：$（＃imei）。val（）+'纬度：'+ data.lat +'经度：'+ data.lng}）;
google.maps.event。 addListener（marker，click，function（e）{
google.maps.event.trigger（map，'resize'）;
infoWindow.open（map，标记）;
}）;
}）（标记，数据）;
}
map.setCenter（latlngbounds.getCenter（））;
map.fitBounds（latlngbounds）;
//初始化路径数组
var path = new google.maps.MVCArr ay（）;
//初始化指导服务
var service = new google.maps.DirectionsService（）;
//设置路径描边颜色
var poly = new google.maps.Polyline（{map：map， strokeColor：'＃4986E7'}）;
// var path = poly.getPath（）;
// path.push（new google.maps.LatLng（data .lat，data.lng））;
for（var i = 0;我< lat_lng.length; i ++）{
if（（i + 1）< lat_lng.length）{
var src = lat_lng [i];
var des = lat_lng [i + 1];
poly.setPath（path）;
service.route（{
origin：src，
目的地：des，
travelMode：google.maps.DirectionsTravelMode.TRANSIT
}，
函数（结果，状态）{
if（status == google.maps.DirectionsStatus.OK）{
for（var i = 0，len = result.routes [0] .overview_path .length; i< len; i ++）{
path.push（result.routes [0] .overview_路径[i]）;
}
}
}）;
}
}
}
< / script>
Hi am developing a project with google map. In this i want to show the particular vehicle latitude and longitude. And put markers for each lat and lng. And also draw a polyline.
Now i have to refresh the map in 5 seconds. In this my polyline affecting, not showing in good. This is my code
var markers = [];
function submit() {
markers = [];
$.ajax({
url: "/map/GetLatitudeValues",
type: 'post',
dataType: 'json',
// imei:null,
data: {imei: $("#imei").val()},
async: false,
success: function (data) {
var Objects = data;
for (var key in Objects) {
markers.push({"lat": Objects[key].Latitude, "lng": Objects[key].Longitude});
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("Status: " + textStatus); alert("Error: " + errorThrown);
}
}); loadmap();
setInterval("submit()", 5000);
// loadmap();
}
$(document).ready(function () {
});
function loadmap() {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var lat_lng = new Array();
var latlngbounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
lat_lng.push(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
latlngbounds.extend(marker.position);
(function (marker, data) {
var infoWindow = new google.maps.InfoWindow({ content: $("#imei").val() + 'Latitude : ' + data.lat + 'Longitude : ' + data.lng});
google.maps.event.addListener(marker, "click", function (e) {
google.maps.event.trigger(map, 'resize');
infoWindow.open(map, marker);
});
})(marker, data);
}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
//Initialize the Path Array
var path = new google.maps.MVCArray();
//Initialize the Direction Service
var service = new google.maps.DirectionsService();
//Set the Path Stroke Color
var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });
// var path = poly.getPath();
// path.push(new google.maps.LatLng(data.lat,data.lng));
for (var i = 0; i < lat_lng.length; i++) {
if ((i + 1) < lat_lng.length) {
var src = lat_lng[i];
var des = lat_lng[i + 1];
poly.setPath(path);
service.route({
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.TRANSIT
},
function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
path.push(result.routes[0].overview_path[i]);
}
}
});
}
}
}
</script>
< input type =textid =imeiname =imei/>
< input type =buttonvalue =submitonclick =submit（）/>
请任意一个帮助......
<input type ="text" id="imei" name="imei" />
<input type="button" value="submit" onclick="submit()" />
Please any one help with this...
推荐答案
.ajax（{
url：/ map / GetLatitudeValues，
类型：'post'，
dataType：'json'，
// imei：null，
data：{imei：
.ajax({
url: "/map/GetLatitudeValues",
type: 'post',
dataType: 'json',
// imei:null,
data: {imei:
（ #imei）。val（）}，
async：false，
成功：函数（数据）{
var Objects = data;
for（对象中的var键）{
markers.push（{lat：Objects [key] .Latitude，lng：Objects [key] .Longitude }）;
}
}，
错误：函数（XMLHttpRequest，textStatus，errorThrown）{
a lert（状态：+ textStatus）; alert（错误：+ errorThrown）;
}
}）; loadmap（）;
setInterval（submit（），5000）;
// loadmap（）;
}
("#imei").val()},
async: false,
success: function (data) {
var Objects = data;
for (var key in Objects) {
markers.push({"lat": Objects[key].Latitude, "lng": Objects[key].Longitude});
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("Status: " + textStatus); alert("Error: " + errorThrown);
}
}); loadmap();
setInterval("submit()", 5000);
// loadmap();
}
（document）.ready（function（）{
}）;
函数loadmap（）{
var mapOptions = {
center：new google.maps.LatLng（markers [0] .lat，markers [0 ] .lng），
zoom：10，
mapTypeId：google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map（document.getElementById（dvMap），mapOptions）;
var lat_lng = new Array（）;
var latlngbounds = new google.maps.LatLngBounds（）;
for（i = 0; i< markers.length; i ++）{
var data = markers [i]
var myLatlng = new google.maps.LatLng（data.lat，data.lng）;
lat_lng.push（myLatlng）;
var marker = new google.maps.Marker（{
职位：myLatlng，
地图：地图
}）;
latlngbounds.extend（marker.position）;
（函数（标记，数据）{
var infoWindow = new google.maps.InfoWindow （{content：
(document).ready(function () {
});
function loadmap() {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var lat_lng = new Array();
var latlngbounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
lat_lng.push(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
latlngbounds.extend(marker.position);
(function (marker, data) {
var infoWindow = new google.maps.InfoWindow({ content:
这篇关于如何在不影响折线的情况下刷新谷歌地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
