地图路由正在工作，但在源或目标的更改时它不反映

时间：2017-06-11 12:34:21

标签： javascript google-maps google-maps-api-3 google-api

我在谷歌地图上展示了嵌套地图路线..

在第一个视图中，它会在地图上显示良好的路线，但我们会从下拉列表更改点，然后根据功能将其反映在地图上。

我的代码段如下：

<style>
html,
body,
#map {
  height: 90%;
  width: 90%;
  margin: 0px;
  padding: 0px
}
.org{
    margin-left: 8%;    
    overflow: hidden;
    position: absolute;
    top: 10px;
    width: 92%;
}
.org_sel {
    float: left;
    margin-right: 30px;
    width: 12%;
}

.org_city{
  width: 200px; 
  height: 34px;
}
.dest_city{
  width: 200px; 
  height: 34px;
}
.dest_sel {
    float: left;
    margin-right: 30px;
    width: 12%;
}
</style>
<html> 
<head>
   <title>Map Demo</title>
</head> 
<div id="map"></div>
<div class="org">
   <div class="org_sel">
     <select id="origin" class="org_city">
       <option value="28.238897, 2.227514">Algeria</option>
       <option value="40.641176, -73.777796">New York</option>
     </select>
   </div>

   <div class="dest_sel">
     <select id="destination" class="dest_city">
       <option value="19.089681, 72.865486">Mumbai</option>
       <option value="21.090766, 79.054833">Nagpur</option>

     </select>
   </div>

   <div class="org_sel">
     <select id="destination1" class="org_city">
     <option value="39.882300, 116.289431">Beijing</option>       
       <option value="59.923152, 10.688673">Oslo</option>
     </select>
   </div>

   <div class="dest_sel">
     <select id="destination2" class="dest_city">
       <option value="59.367975, 18.115430">Stockholm</option>
       <option value="56.199034, 92.734745">Krasnoyarsk</option>
     </select>
   </div>
 </div>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDgO1x-l4g_ofV7Q26EzJPA7tYDcKhpauQ&libraries=places&callback=initMap"></script>

<script>

var cnt = 0;
var locations = [];
var flightPathCoordinates = [];

function initMap(org, dest1, dest2, dest3) {
            map = new google.maps.Map(document.getElementById('map'), {
              zoom: 3,
              center: {lat: 28.615809, lng: 77.217683},
              mapTypeId: 'terrain'
            });

            if(cnt==0)
            {
                    flightPathCoordinates = [
                      {lat: 28.238897, lng: 2.227514},
                      {lat: 19.089681, lng: 72.865486}, 
                      {lat: 39.882300, lng: 116.289431},
                      {lat: 59.367975, lng: 18.115430}                  
                    ];
            }else
            {               
                   var org_arr = org.split(', ');
                   var dest_arr = dest1.split(', ');
                   var dest1_arr = dest2.split(', ');
                   var dest2_arr = dest3.split(', ');                            

                   flightPathCoordinates = [];

                   flightPathCoordinates = [
                        {lat: org_arr[0], lng: org_arr[1]}, 
                        {lat: dest_arr[0], lng: dest_arr[1]},
                        {lat: dest1_arr[0], lng: dest1_arr[1]},
                        {lat: dest2_arr[0], lng: dest2_arr[1]}
                   ];   
            }

            cnt = cnt + 1;        

            flightPath = new google.maps.Polyline({
              path: flightPathCoordinates,
              geodesic: true,
              strokeColor: '#FF0000',
              strokeOpacity: 1.0,
              strokeWeight: 2
            });

            console.log(flightPath); 

            flightPath.setMap(map);
}

google.maps.event.addDomListener(window, "load", initMap);

jQuery(document).on('change','#origin',function (event) {
       var org = $('#origin').val(); 
       var dest = $('#destination').val();
       var dest1 = $('#destination1').val();
       var dest2 = $('#destination2').val();

       initMap(org, dest, dest1, dest2);
});

jQuery(document).on('change','#destination',function (event) {
       var org = $('#origin').val(); 
       var dest = $('#destination').val();
       var dest1 = $('#destination1').val();
       var dest2 = $('#destination2').val();

       initMap(org, dest, dest1, dest2);
});

jQuery(document).on('change','#destination1',function (event) {
       var org = $('#origin').val(); 
       var dest = $('#destination').val();
       var dest1 = $('#destination1').val();
       var dest2 = $('#destination2').val();

       initMap(org, dest, dest1, dest2);
});

jQuery(document).on('change','#destination2',function (event) {
       var org = $('#origin').val(); 
       var dest = $('#destination').val();
       var dest1 = $('#destination1').val();
       var dest2 = $('#destination2').val();

       initMap(org, dest, dest1, dest2);
}); 

</script>

但是，当我从下拉列表中更改点数时，它不会反映在地图上..地图会受到干扰......

1 个答案:

答案 0 :(得分：0)

当我执行示例代码时，我可以看到以下错误消息：InvalidValueError: at index 0: not a LatLng or LatLngLiteral: in property lat: not a number。

这意味着您应该将LatLngLiteral对象属性中的字符串转换为数字：

flightPathCoordinates = [
    {lat: parseFloat(org_arr[0]), lng: parseFloat(org_arr[1])}, 
    {lat: parseFloat(dest_arr[0]), lng: parseFloat(dest_arr[1])},
    {lat: parseFloat(dest1_arr[0]), lng: parseFloat(dest1_arr[1])},
    {lat: parseFloat(dest2_arr[0]), lng: parseFloat(dest2_arr[1])}
];

您还应该在实施中修复一件事。目前，您在每个更改事件中调用initMap(org, dest, dest1, dest2);。每次选择时，这将创建一个新的地图new google.maps.Map(document.getElementById('map')...实例。请注意，每个新的地图实例都会计入您的配额，因此您可以使用此实施消耗每日配额。我建议保留一个map实例和一个Polyline实例，你可以在选择之后更新。

查看修改后的示例

var map, flightPath;  
var cnt = 0;
var locations = [];
var flightPathCoordinates = [];
  
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 3,
        center: {lat: 28.615809, lng: 77.217683},
        mapTypeId: 'terrain'
    });
  
    flightPathCoordinates = [
        {lat: 28.238897, lng: 2.227514},
        {lat: 19.089681, lng: 72.865486}, 
        {lat: 39.882300, lng: 116.289431},
        {lat: 59.367975, lng: 18.115430}                  
    ];
  
    flightPath = new google.maps.Polyline({
        path: flightPathCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
  
    flightPath.setMap(map);
  
    adjustBounds();
}  

function updatePolyline(org, dest1, dest2, dest3) {
    var org_arr = org.split(', ');
    var dest_arr = dest1.split(', ');
    var dest1_arr = dest2.split(', ');
    var dest2_arr = dest3.split(', ');                            

    flightPathCoordinates = [
        {lat: parseFloat(org_arr[0]), lng: parseFloat(org_arr[1])}, 
        {lat: parseFloat(dest_arr[0]), lng: parseFloat(dest_arr[1])},
        {lat: parseFloat(dest1_arr[0]), lng: parseFloat(dest1_arr[1])},
        {lat: parseFloat(dest2_arr[0]), lng: parseFloat(dest2_arr[1])}
    ];   

    flightPath.setPath(flightPathCoordinates);
  
    adjustBounds();
}
  
function adjustBounds() {
   var bounds = new google.maps.LatLngBounds();
   flightPathCoordinates.forEach(function(p) {
       bounds.extend(p);
   });
   map.fitBounds(bounds); 
} 


jQuery(document).on('change','#origin',function (event) {
       var org = $('#origin').val(); 
       var dest = $('#destination').val();
       var dest1 = $('#destination1').val();
       var dest2 = $('#destination2').val();

       updatePolyline(org, dest, dest1, dest2);
});

jQuery(document).on('change','#destination',function (event) {
       var org = $('#origin').val(); 
       var dest = $('#destination').val();
       var dest1 = $('#destination1').val();
       var dest2 = $('#destination2').val();

       updatePolyline(org, dest, dest1, dest2);
});

jQuery(document).on('change','#destination1',function (event) {
       var org = $('#origin').val(); 
       var dest = $('#destination').val();
       var dest1 = $('#destination1').val();
       var dest2 = $('#destination2').val();

       updatePolyline(org, dest, dest1, dest2);
});

jQuery(document).on('change','#destination2',function (event) {
       var org = $('#origin').val(); 
       var dest = $('#destination').val();
       var dest1 = $('#destination1').val();
       var dest2 = $('#destination2').val();

       updatePolyline(org, dest, dest1, dest2);
}); 
html,
body,
#map {
  height: 90%;
  width: 90%;
  margin: 0px;
  padding: 0px
}
.org{
    margin-left: 8%;    
    overflow: hidden;
    position: absolute;
    top: 10px;
    width: 92%;
}
.org_sel {
    float: left;
    margin-right: 30px;
    width: 12%;
}

.org_city{
  width: 200px; 
  height: 34px;
}
.dest_city{
  width: 200px; 
  height: 34px;
}
.dest_sel {
    float: left;
    margin-right: 30px;
    width: 12%;
}
<div id="map"></div>
<div class="org">
   <div class="org_sel">
     <select id="origin" class="org_city">
       <option value="28.238897, 2.227514">Algeria</option>
       <option value="40.641176, -73.777796">New York</option>
     </select>
   </div>

   <div class="dest_sel">
     <select id="destination" class="dest_city">
       <option value="19.089681, 72.865486">Mumbai</option>
       <option value="21.090766, 79.054833">Nagpur</option>

     </select>
   </div>

   <div class="org_sel">
     <select id="destination1" class="org_city">
     <option value="39.882300, 116.289431">Beijing</option>       
       <option value="59.923152, 10.688673">Oslo</option>
     </select>
   </div>

   <div class="dest_sel">
     <select id="destination2" class="dest_city">
       <option value="59.367975, 18.115430">Stockholm</option>
       <option value="56.199034, 92.734745">Krasnoyarsk</option>
     </select>
   </div>
 </div>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDgO1x-l4g_ofV7Q26EzJPA7tYDcKhpauQ&libraries=places&callback=initMap"></script>

你也可以在jsbin http://jsbin.com/dehosu/edit?html,output

看到它

我希望这有帮助！

相关问题
最新问题