Javascript 在多个标记地图之间绘制不同的路线
我刚使用谷歌地图，我想画多条路线，彼此分开，这一点都可以，画我的标记也可以，但路线总是在没有道路的地方画线，我的代码，画路线：Javascript 在多个标记地图之间绘制不同的路线,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我刚使用谷歌地图，我想画多条路线，彼此分开，这一点都可以，画我的标记也可以，但路线总是在没有道路的地方画线，我的代码，画路线： for (var t = 0; t < lat_lng.length; t++) { var path = new google.maps.MVCArray(); //Intialize the Direction Service var service = new google.maps.Directions
for (var t = 0; t < lat_lng.length; t++) {
var path = new google.maps.MVCArray();
//Intialize the Direction Service
var service = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
//Set the Path Stroke Color
var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });
if ((t + 1) < lat_lng.length) {
var src = lat_lng[t];
var des = lat_lng[t + 1];
poly.setPath(path);
service.route({
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
for (var k = 0, len = result.routes[0].overview_path.length; k < len; k++) {
path.push(result.routes[0].overview_path[k]);
}
}
});
}
t++;
}
如何删除这些行 当前，您正在将所有结果串在一条多段线中。方向服务是异步的，结果返回的顺序可能与发送的顺序不同。一种解决方案是将每个独立方向生成一条单独的多段线。如果需要将它们组合成一条多段线，则需要跟踪顺序并按正确顺序将它们组合在一起
- 相关问题：
- 相关问题：
var地理编码器；
var映射；
函数初始化（）{
var map=new google.maps.map(
document.getElementById（“地图画布”）{
中心：新google.maps.LatLng（37.4419，-122.1419），
缩放：13，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var lat_液化天然气=[
新的google.maps.LatLng（19.449045，-99.1588115），
新的google.maps.LatLng（19.54951，-99.20688），
新的google.maps.LatLng（19.4219738，-99.0992125），
新的google.maps.LatLng（19.446199，-99.1609357），
新google.maps.LatLng（19.54578，-99.206918），
新google.maps.LatLng（19.503391，-99.201939）
];
对于（var t=0；
（t+1）
html，
身体，
#地图画布{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}
当前，您正在将所有结果串在一条多段线中。方向服务是异步的，结果返回的顺序可能与发送的顺序不同。一种解决方案是将每个独立方向生成一条单独的多段线。如果需要将它们组合成一条多段线，则需要跟踪顺序并按正确顺序将它们组合在一起
- 相关问题：
- 相关问题：
代码片段：
var地理编码器；
var映射；
函数初始化（）{
var map=new google.maps.map(
document.getElementById（“地图画布”）{
中心：新google.maps.LatLng（37.4419，-122.1419），
缩放：13，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var lat_液化天然气=[
新的google.maps.LatLng（19.449045，-99.1588115），
新的google.maps.LatLng（19.54951，-99.20688），
新的google.maps.LatLng（19.4219738，-99.0992125），
新的google.maps.LatLng（19.446199，-99.1609357），
新google.maps.LatLng（19.54578，-99.206918），
新google.maps.LatLng（19.503391，-99.201939）
];
对于（var t=0；
（t+1）
html，
身体，
#地图画布{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}
将此代码放在c中#
SqlConnection-con=newsqlconnection（ConfigurationManager.ConnectionStrings[“MvCon”].ToString（））；
sqldatada；
DataTable dt=新的DataTable（）；
ArrayList marker=新的ArrayList（）；
公共字符串[]myArray；
da=新的SqlDataAdapter（“从表_名称中选择*”，con）；
da.填充（dt）；
对于（int i=0；i"lat": '19.449045', "lng": '-99.1588115', "latdest": '19.54951', "lngdest": '-99.20688', "lat": '19.4219738', "lng": '-99.0992125', "latdest": '19.446199', "lngdest": '-99.1609357',
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["MvCon"].ToString());
SqlDataAdapter da;
DataTable dt = new DataTable();
ArrayList marker = new ArrayList();
public string[] myArray;
da = new SqlDataAdapter("select * from table_name", con);
da.Fill(dt);
for (int i = 0; i < dt.Rows.Count; i++)
{
marker.Add("{ " + '"' + "lat" + '"' + ": " + '"' + dt.Rows[i]["latitude"] + '"' + ", " + '"' + "lng" + '"' + ": " + '"' + dt.Rows[i]["longitude"] + '"' + " }");
}
myArray = (string[])marker.ToArray(typeof(string));
hdn_loc.Value = "[" + string.Join(",", myArray) + "]";
this.ClientScript.RegisterStartupScript(this.GetType(), "script", "map_location();", true);
<script type="text/javascript">
function map_location() {
var marker_point = document.getElementById('<%= hdn_loc.ClientID %>').value;
var markers = JSON.parse(marker_point);//converts string value in array
//alert(markers.slice(-1)[0].lng) // last index value
var myOptions = {
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"), myOptions);
var infoWindow = new google.maps.InfoWindow();
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,
title: data.title
});
latlngbounds.extend(marker.position);
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
// for getting values of array
var loc;
var latlng = new google.maps.LatLng(data.lat, data.lng);
var geocoder = geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'latLng': latlng }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
loc = "Location: " + results[1].formatted_address;
infoWindow.setContent(loc);
infoWindow.open(map, marker);
}
}
})
});
})
(marker, data);
}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
for (var t = 0;
(t + 1) < lat_lng.length; t++) {
//Intialize the Direction Service
var service = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var bounds = new google.maps.LatLngBounds();
if ((t + 1) < lat_lng.length) {
var src = lat_lng[t];
var des = lat_lng[t + 1];
service.route({
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
// new path for the next result
var path = new google.maps.MVCArray();
//Set the Path Stroke Color
// new polyline for the next result
var poly = new google.maps.Polyline({
map: map,
strokeColor: '#4986E7',
});
poly.setPath(path);
for (var k = 0, len = result.routes[0].overview_path.length; k < len; k++) {
path.push(result.routes[0].overview_path[k]);
bounds.extend(result.routes[0].overview_path[k]);
map.fitBounds(bounds);
}
} else alert("Directions Service failed:" + status);
});
}
}
}
</script>
<asp:HiddenField runat="server" ID="hdn_loc" />
<asp:Button runat="server" ID="btn" Text="show loc" OnClick="btn_Click" />
<div id="dvMap" style="width: 500px; height: 400px"></div>