获取latlng并在两个latlng之间绘制折线 [英] Get latlng and draw a polyline between that two latlng

问题描述

我的代码中有一些问题，首先我想从两个文本框中获取我的指定地址/城市名称，然后将其从位置的latlng转换为position的latlng，最后我要绘制一个折线这些点和标记之间的点也，但现在我想在这些点之间画一条线。但仍然不能工作这个代码也没有在控制台中的任何错误。代码在这里为您提供帮助。

I have some issue in my code in that first I want to get latlng of my given address/city name from two text boxes after that i converts it to from position's latlng and to position's latlng and at last i want to draw a polyline between these point and markers on both point also, But now i am trying to draw a line between these points. But still not working this code also no any error in console also. code is here for your help.

function getRoute(){
var from_text = document.getElementById("travelFrom").value;
var to_text = document.getElementById("travelTo").value;

if(from_text == ""){
    alert("Enter travel from field")    
    document.getElementById("travelFrom").focus();
}
else if(to_text == ""){
    alert("Enter travel to field"); 
    document.getElementById("travelTo").focus();
}
else{
    //google.maps.event.addListener(map, "", function (e) {
    var myLatLng = new google.maps.LatLng(28.6667, 77.2167);                                                           
    var mapOptions = {
        zoom: 3,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };                                                         
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);                                                          
        var geocoder = new google.maps.Geocoder();
        var address1 = from_text;
        var address2 = to_text;
        var from_latlng,to_latlng;
            //var prepath = path;
            //if(prepath){
            //  prepath.setMap(null);
            //} 
            geocoder.geocode( { 'address': address1}, function(results, status) {
                  if (status == google.maps.GeocoderStatus.OK)
                  {
                      // do something with the geocoded result
                //    alert(results[0].geometry.location);
                      from_latlng = results[0].geometry.location;

                    //   from_lat = results[0].geometry.location.latitude;
                      // from_lng = results[0].geometry.location.longitude;

                    //  alert(from_latlng);
                  }
            });
            geocoder.geocode( { 'address': address2}, function(results, status) {
                  if (status == google.maps.GeocoderStatus.OK)
                  {
                      // do something with the geocoded result
                        to_latlng = results[0].geometry.location;
                     //  to_lat = results[0].geometry.location.latitude;
                     //  to_lng = results[0].geometry.location.longitude;
                      // results[0].geometry.location.longitude
                    //  alert(to_latlng)
                  }
            });
            setTimeout(function(){
                    var flightPlanCoordinates = [
                        new google.maps.LatLng(from_latlng),
                        new google.maps.LatLng(to_latlng)           
                    ];
                    //alert("123")
                    var polyline;   
                    polyline = new google.maps.Polyline({
                        path: flightPlanCoordinates,
                        strokeColor: "#FF0000",
                        strokeOpacity: 1.0,
                        strokeWeight: 2
                    });
                    polyline.setMap(map);       
                    // assign to global var path
                //  path = polyline;
         },4000);
    // });
    }

}

推荐答案

/*This is script*/ 

    var x=0;
    var map;
    var prepath;
    var path = null;
    var current_lat = 28.6667;
    var current_lng = 77.2167;
function initialize() {
  var myLatLng = new google.maps.LatLng(28.6667, 77.2167);
  var mapOptions = {
    zoom: 3,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    //alert("sdf")  

google.maps.event.addListener(map, "click", function (e) {  
    //delete old
        //alert("sdf123")
    prepath = path;
    if(prepath){
        prepath.setMap(null);
    }   
    current_lat = e.latLng.lat();
    current_lng = e.latLng.lng();

    var flightPlanCoordinates = [               
            new google.maps.LatLng(39.9100, 116.4000),              
            new google.maps.LatLng(35.6833, 139.7667)               
    ];
    var polyline;   
    polyline = new google.maps.Polyline({
        path: flightPlanCoordinates,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2
    }); 
    //new polyline
    polyline.setMap(map);   
    // assign to global var path
    path = polyline;
    });

}


google.maps.event.addDomListener(window, 'load', initialize);


/*this is html*/

<div id="map-canvas"></div>
    <div id="textboxContainer" style="width:100%; height:40px; top:0; position:absolute;">
        From : <input type="text" name="travelFrom" id="travelFrom"> &nbsp; To : <input type="text" name="travelTo" id="travelTo" onBlur="getRoute()">
    </div>

这篇关于获取latlng并在两个latlng之间绘制折线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！