在谷歌地图添加动态折线请任何人帮助我坚持这可能几天 [英] add dynamic polyline in google map please anyone help am stuck with this may days

问题描述

嗨

我现在开发一个项目谷歌地图。在这里我从sql server数据库获取值，数据在数据库中连续接收。



所以Marker会自动添加....

i想要在我的编码行中添加1> 2-> 3->>>

等标记添加折线，添加1-> 2,1-> 3 ，1> 4..etc ..我的编码是。

Hi
Am now develop a project google map. In this i get the values from sql server database and the data are continuous received in database.

so Marker will be added automatically....
i want to add polyline for markers like 1->2->3->4->
in my coding line adding 1->2,1->3,1->4..etc.. my codings are.

@model System.Collections.Generic.IEnumerable<samgm.models.map>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
    var markers = [];
    var lat_lng = [];
    var mapFlag=0;
    function submit() {
        markers = [];
      // lat_lng.length = [];
        $.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);
            }
        });
        if (mapFlag == 0) {
            intialize();
          
        }
      
        loadmap();
        mapFlag = 1;
        setInterval("submit()", 5000);
    }
   
    var mapOptions;
    var map;
    var latlngbounds;

    
   
    var path, service,poly;
    function intialize() {
        mapOptions = {
            center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
        lat_lng = new Array();
        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) {
                    infoWindow.open(map, marker);
                   
                });

            })(marker, data);

        }
        map.setCenter(latlngbounds.getCenter());
        map.fitBounds(latlngbounds);

    
        //Initialize the Path Array
         path = new google.maps.MVCArray();

        //Initialize the Direction Service
         service = new google.maps.DirectionsService();

        
    }
    function loadmap() {
        if (mapFlag == 1) {
            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
                });
            }
        }
      
        poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });
                    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];
                            path.push(src);
                            poly.setPath(path);
                            service.route({
                                origin: src,
                                destination: des,
                                travelMode: google.maps.DirectionsTravelMode.TRANSIT                          
                                });
                       }
                    }
    }
   
</script>
 
<div id="dvMap" style="width: 800px; height: 500px">
</div>
 <input type ="text" id="imei" name="imei" />  
  <input type="button" value="submit" onclick="submit()" /></samgm.models.map>

推荐答案

.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 key in 对象）{
markers.push（{ lat：Objects [key]。纬度， lng：Objects [key] .Longitude}）;
}
}，
错误：函数（XMLHttpRequest，textStatus，errorThrown）{
alert（ 状态： + textStatus）; alert（ 错误： + errorThrown）;
}
}）;
if （mapFlag == 0 ）{
intialize（）;

}

loadmap（）;
mapFlag = 1 ;
setInterval（ submit（）， 5000 ）;
}

var mapOptions;
var map;
var latlngbounds;



var path，service，poly;
函数intialize（）{
mapOptions = {
center： new google.maps.LatLng（markers [ 0 ]。lat，markers [ 0 ]。lng），
zoom： 10 ，
mapTypeId：google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map（document.getElementById（ dvMap），mapOptions）;
lat_lng = new Array（）;
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）;
（功能（标记，数据）{
var infoWindow = new google。 maps.InfoWindow（{content：

("#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); } }); if (mapFlag == 0) { intialize(); } loadmap(); mapFlag = 1; setInterval("submit()", 5000); } var mapOptions; var map; var latlngbounds; var path, service,poly; function intialize() { mapOptions = { center: new google.maps.LatLng(markers[0].lat, markers[0].lng), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); lat_lng = new Array(); 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（）+ ' 纬度：' + data.lat + ' 经度：' + data.lng}）;
google.maps。 event .addListener（marker， click，function（e）{
infoWindow.open（map，marker）;

}）;

}）（标记，数据）;

}
map.setCenter（latlngbounds.getCenter（））;
map.fitBounds（latlngbounds）;


// 初始化路径数组
path = new google.maps.MVCArray（）;

// 初始化方向服务
service = new google.maps.DirectionsService（）;


}
function loadmap（）{
if （mapFlag == 1 ）{
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
}）;
}
}

poly = new google.maps.Polyline（{map：map，strokeColor：' ＃4986E7'}）;
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];
path.push（src）;
poly.setPath（path）;
service.route（{
origin：src，
destination：des，
travelMode：google.maps.DirectionsTravelMode.TRANSIT
}）;
}
}
}

< / 脚本 >

< div id = < span class =code-string> dvMap style = width：800px; height：500px >
< / div >
< input type = text id = imei name = imei />
< input type = button value = submit onclick = submit（） /> < / samgm.models.map >

("#imei").val() + 'Latitude : ' + data.lat + 'Longitude : ' + data.lng }); google.maps.event.addListener(marker, "click", function (e) { infoWindow.open(map, marker); }); })(marker, data); } map.setCenter(latlngbounds.getCenter()); map.fitBounds(latlngbounds); //Initialize the Path Array path = new google.maps.MVCArray(); //Initialize the Direction Service service = new google.maps.DirectionsService(); } function loadmap() { if (mapFlag == 1) { 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 }); } } poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' }); 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]; path.push(src); poly.setPath(path); service.route({ origin: src, destination: des, travelMode: google.maps.DirectionsTravelMode.TRANSIT }); } } } </script> <div id="dvMap" style="width: 800px; height: 500px"> </div> <input type ="text" id="imei" name="imei" /> <input type="button" value="submit" onclick="submit()" /></samgm.models.map>

这篇关于在谷歌地图添加动态折线请任何人帮助我坚持这可能几天的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！