未捕获的类型错误：无法读取属性“路由”答案

【问题标题】：Uncaught TypeError: Cannot read property 'route'未捕获的类型错误：无法读取属性“路由”
【发布时间】：2026-01-09 05:00:01
【问题描述】：

我使用 Google Maps API 构建了一个地图，该地图将根据来自 'whereNew.js' 的纬度和经度绘制点，其颜色将取决于来自 'MarketData.js' 的另一个参数。单击标记时，它将显示一个带有按钮的信息窗口-“显示路线”和一些基于“MarketData.js”的信息。至此代码执行成功。

之后，当单击任何标记的“显示路线”按钮时，我希望 Google Maps API 显示从“MarketData.js”第 8 列的每个位置到该标记的所有路线。但是，当我点击那个按钮，它给出了这个错误：

Uncaught TypeError: Cannot read property 'route' of undefined at calculateAndDisplayRoute

whereNewTest1.html:162

我不明白我做错了什么。请帮忙

whereNewTest1.html

    <html>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Markets of Kolkata</title>
    <style>
    #map {
      height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */

    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    #floating-panel {
      position: absolute;
      top: 10px;
      left: 25%;
      z-index: 5;
      background-color: #fff;
      padding: 5px;
      border: 1px solid #999;
      text-align: center;
      font-family: 'Roboto', 'sans-serif';
      line-height: 30px;
      padding-left: 10px;
    }

    #warnings-panel {
      width: 100%;
      height: 10%;
      text-align: center;
    }
    </style>
    <link href="http://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">

    <!-- If you are in China, you may need to use theis site for the Google Maps code
    <script src="http://maps.google.cn/maps/api/js" type="text/javascript"></script> -->
    <!--<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> -->
    <!-- <script async defer src=
        "https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&key=AIzaSyDrdSH53E0MRIfajUGZQiFHAB0aLfzFIVU&v=3&v=3&callback=displayDirections"></script>
    </script> -->
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBbXta5ppMyzPmTCGNsyP-djMlSOGJ9t9o&callback=initialize">
  </script>

    <script src="whereNew.js"></script>
    <script src="marketData.js"></script>
    <script>

    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;
    var markerArray = [];
    var dest ;
    function initialize() 
    {
        //alert("To see the title of a marker, hover over the marker but don't click.");
        var myLatlng = new google.maps.LatLng(22.39361,88.099263)
        var mapOptions = {
            zoom: 3,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            }

        var markerArray = [];
        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer(
        {
            map: map
        });


        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        i = 0;
        var markers = [];

        for ( pos in myData ) 
        {    
            var row = myData[pos];
            var row1 = MarketInfo[i];
            window.console && console.log(row) && console.log(row1);
            // if ( i < 3 ) { alert(row); }
            var newLatlng = new google.maps.LatLng(row[0], row[1]);
            var marker = new google.maps.Marker(
            {
                position: newLatlng,
                map: map,
                title: row[3],
            });

            var infowindow = new google.maps.InfoWindow({ });
            var largeInfowindow = new google.maps.InfoWindow({ });
            dest = row1[1];
            var content = row1[2] + '<br/><button onclick = "calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, map, dest);">Show Routes</button>';

            if((content.search("WHOLESALE"))>-1)
            {
                marker.setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png');
            }
            else if((content.search("WHOLE SALE"))>-1)
            {
                marker.setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png');
            }
            else if((content.search("MAJOR"))>-1)
            {
                marker.setIcon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png');
            }
            else
            {
                marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png');
            }

            google.maps.event.addListener(marker,'click', (function(marker,content,infowindow)
            { 
                return function() 
                {
                    infowindow.setContent(content);
                    infowindow.open(map,marker);
                };
            })(marker,content,infowindow));

            markers.push(marker);   
            i = i + 1;
        }




        function populateInfoWindow(marker, infowindow)
        {
            if(infowindow.marker != marker)
            {
                infowindow.marker = marker;
                infowindow.setContent('<div>'+infowindow.content+'</div>');
                infowindow.open(map, marker);

                infowindow.addListener('closeclick', function(){
                infowindow.setMarker(null);
                });

            }   
        } 
    }

    function calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, map, dest) 
    {
        for (var i = 0; i < markerArray.length; i++) 
        {
        markerArray[i].setMap(null);
        }

        for (pos in MarketInfo) 
        {
        var row = MarketInfo[pos];
        // Second loop for multiple destination
        var str_array = row[7].split(',');
        for (var j = 0; j < str_array.length; j++) 
        {
            directionsService.route(
            {
            origin: str_array[j],
            destination: dest,
            travelMode: 'DRIVING'
            }, function(response, status) {
                if (status === 'OK') 
                {
                    document.getElementById('warnings-panel').innerHTML = '<b>' + response.routes[0].warnings + '</b>';
                    var dirDisplay = new google.maps.DirectionsRenderer({
                    map: map
                });
                dirDisplay.setDirections(response);
                }else 
                {
                    window.alert('Directions request failed due to ' + status);
                }
          });
        }
    }
    }


    </script>

  <body onload="initialize()">
<div id="map_canvas" style="height: 600px"></div>
<p>
<b>Developed by</b>
<a href="http://www.linkedin.com/in/arnab-chakravarty-8a329111b?trk=nav_responsive_tab_profile"><b>Arnab Chakravarty</b></a>.
</p>
</body>
</html>

whereNew.js

myData = [ 
[22.5193768,88.3656851, 'K.M.C. Market, 3rd Floor Market Complex, 212, Rash Behari Avenue Road, Hindustan Park, Gariahat, Kolkata, West Bengal 700019, India', 'PAL BAZAR'], 
[22.4977887,88.3796042, 'Garfa Main Rd, Kolkata, West Bengal 700075, India', 'RAMLAL BAZAR'], 
[22.5048463,88.3882325, 'Purbachal Main Rd, Ramlal Bazar, Haltu, Kolkata, West Bengal 700078, India', 'COLLEGE STREET MARKET ( SPORTS GOODS)'] 
];

MarketData.js

MarketInfo = [
["GARIAHAT KMC MARKET", "K.M.C. Market, 3rd Floor Market Complex, 212, Rash Behari Avenue Road, Hindustan Park, Gariahat, Kolkata- 700019", "MAJOR (1400SHOP + HOWKER)", "FRUITS, VEGETABLES, FLOWER, FISH, MEAT, GROCERY, CLOTHING, FURNITURE , HOUSEHOLD, FOOTWEAR ELECTRICAL ETC", "", "", "BARABAZAR, KOLEYMART", "HOWRAH", "We collect the goods ourselves", "", "MANY", "Cars, Light goods vehicles (LGV), Heavy goods vehicles/lorries (HGV)", "Within one hour", "", "", "No problems encountered", "", "IF A UNLOADING SPACE CAN PROVIDE BY GOVT. IT WILL BE BETTER"], 
["PAL BAZAR", "GARIFA MAIN ROAD, KOLKATA - 700 075", "MINOR (150SHOP + 70HOWKERS)", "FRESH, COOL AND FROZEN PRODUCT, OTHER TYPE OF CONSUMER GOODS, TEXTILE,FOOTWEAR, ELECTRONIC AND ELECTRICAL EQUIPMENT, BUILDING MATERIALS", "", "SANDHYA BAZAR", "BARA BAZAR, CHADNI CHOWK", "", "The goods are delivered by multiple suppliers", "MANY", "10 TO 20", "Bicycles/tricycles/carts, Motorised two/three-wheelers", "Within one hour", "", "", "Delivery vehicle causes traffic jams in front of the establishment", "", ""], 
["RAMLAL BAZAR", "Purbachal Main Rd, Ramlal Bazar, Haltu. Kolkata-700078", "MINOR (150 SHOP+ 180 HOWKERS)", "FRUITS, VEGETABLE, FISH, MEAT, GROCERY, TEXTILE, ELECTRICAL, BUILDING MATERIALS ETC", "", "BAGHAJATIN AND SANDHYA BAZAR", "BARA BAZAR, EZRA ST.", "", "We collect the goods ourselves", "", "MANY", "Bicycles/tricycles/carts, Motorised two/three-wheelers, Light goods vehicles (LGV)", "Within one hour", "", "", "Limited storage space available, Delivery vehicle causes traffic jams in front of the establishment, High delivery costs", "", "PARKING PLACE REQUIRE"]
];

【问题讨论】：

您的代码中有一个不应该存在的}。
@JohnM 我检查了两次。我不认为这是问题所在。

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

【解决方案1】：

问题出在这行代码

var content = row1[2] + '<br/><button onclick = calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, map, row1[1]);>Show Routes</button>';

onclick 需要双引号中的函数名

由于您将 HTML 创建为字符串，因此不会捕获您传递的参数。您可以尝试使用全局变量并查看结果。

编辑：

我对代码做了如下改动

在初始化函数之外声明你的全局变量：

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var markerArray = [];
function initialize() {

将错误的行改为：

var content = row1[2] + '<br/><button onclick="calculateAndDisplayRoute(' + i + ')">Show Routes</button>';

注意，我正在发送一个行标识符 (i)。我已经删除了所有其他参数。

calculateAndDisplayRoute 的签名是：

function calculateAndDisplayRoute(i) {
        var destination1 =  MarketInfo[i][1];
...
}

【讨论】：

是的，它解决了这个问题。！谢谢