Fatal编程技术网
  • javascript/
  • Javascript 地图路由正在运行，但在源或目的地发生变化时，它不会'；不反映

Javascript 地图路由正在运行，但在源或目的地发生变化时，它不会'；不反映

javascript google-maps google-maps-api-3 google-api

Javascript 地图路由正在运行，但在源或目的地发生变化时，它不会'；不反映,javascript,google-maps,google-maps-api-3,google-api,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: absolut

我已经在谷歌地图上显示了嵌套地图路由

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

我的代码片段如下所示：

<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>


html，
身体，
#地图{
身高：90%；
宽度：90%；
边际：0px；
填充：0px
}
.org{
左缘：8%；
溢出：隐藏；
位置：绝对位置；
顶部：10px；
宽度：92%；
}
.org_sel{
浮动：左；
右边距：30px；
宽度：12%；
}
.org_城市{
宽度：200px；
高度：34px；
}
德斯特胡城酒店{
宽度：200px；
高度：34px；
}
目的地选择{
浮动：左；
右边距：30px；
宽度：12%；
}
地图演示
阿尔及利亚
纽约
孟买
那格浦尔
北京
奥斯陆
斯德哥尔摩
克拉斯诺亚尔斯克
var-cnt=0；
var位置=[]；
var flightPathCoordinates=[]；
函数initMap（组织、目的地1、目的地2、目的地3）{
map=new google.maps.map（document.getElementById（'map'）{
缩放：3，
中心：{lat:28.615809，lng:77.217683}，
mapTypeId:'地形'
});
如果（cnt==0）
{
flightPathCoordinates=[
{lat:28.238897，lng:2.227514}，
{lat:19.089681，lng:72.865486}，
{lat:39.882300，lng:116.289431}，
{拉丁美洲：59.367975，液化天然气：18.115430}
];
}否则
{               
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=新建google.maps.Polyline({
路径：flightPathCoordinates，
测地线：正确，
strokeColor:“#FF0000”，
笔划不透明度：1.0，
冲程重量：2
});
console.log（flightPath）；
flightPath.setMap（map）；
}
google.maps.event.addDomListener（窗口“加载”，initMap）；
jQuery（文档）.on（'change'，'#origin'，函数（事件）{
var org=$（'#origin'）.val（）；
var dest=$（'#destination'）.val（）；
var dest1=$（'#destination1'）.val（）；
var dest2=$（'#destination2'）.val（）；
initMap（组织、目的地、目的地1、目的地2）；
});
jQuery（文档）.on（'change'，'#destination'，函数（事件）{
var org=$（'#origin'）.val（）；
var dest=$（'#destination'）.val（）；
var dest1=$（'#destination1'）.val（）；
var dest2=$（'#destination2'）.val（）；
initMap（组织、目的地、目的地1、目的地2）；
});
jQuery（文档）.on（'change'，'#destination1'，函数（事件）{
var org=$（'#origin'）.val（）；
var dest=$（'#destination'）.val（）；
var dest1=$（'#destination1'）.val（）；
var dest2=$（'#destination2'）.val（）；
initMap（组织、目的地、目的地1、目的地2）；
});
jQuery（文档）.on（'change'，'#destination2'，函数（事件）{
var org=$（'#origin'）.val（）；
var dest=$（'#destination'）.val（）；
var dest1=$（'#destination1'）.val（）；
var dest2=$（'#destination2'）.val（）；
initMap（组织、目的地、目的地1、目的地2）；
});
但当我从下拉列表中更改点时，它不会反映在地图上。。映射受到干扰。

当我执行示例代码时，我可以看到以下错误消息：
InvalidValueError:在索引0处：不是LatLng或LatLngLiteral:在属性lat中：不是数字

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

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）在每个更改事件中。这将创建map
new google.maps.map（document.getElementById（'map'）的新实例…
每次选择某个对象时。请注意，地图的每个新实例都会计入您的配额，因此您可以使用此实现来使用每日配额。我建议保留一个地图实例和一个多段线实例，您可以在选择某个对象后进行更新

看看修改后的示例



var映射，flightPath；
var-cnt=0；
var位置=[]；
var flightPathCoordinates=[]；
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
缩放：3，
中心：{lat:28.615809，lng:77.217683}，
mapTypeId:'地形'
});
flightPathCoordinates=[
{lat:28.238897，lng:2.227514}，
{lat:19.089681，lng:72.865486}，
{lat:39.882300，lng:116.289431}，
{拉丁美洲：59.367975，液化天然气：18.115430}
];
flightPath=新建google.maps.Polyline({
路径：flightPathCoordinates，
测地线：正确，
strokeColor:“#FF0000”，
笔划不透明度：1.0，
冲程重量：2
});
flightPath.setMap（map）；
调整边界（）；
}  
功能更新方案（组织、目的地1、目的地2、目的地3）{
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_