个人中心
gpt4 book ai didi

javascript - 未捕获的类型错误 : Cannot read property 'setDirections' of undefined

转载 作者：行者123 更新时间：2023-11-27 23:12:09 27 4
gpt4 key购买 nike

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

在此之后，当单击任何标记的“显示路线”按钮时，我希望 Google Maps API 显示从“MarketData.js”的第 7 列的每个位置到该标记的所有路线。但是，当我单击该按钮，出现此错误:

Uncaught TypeError: Cannot read property 'setDirections' of undefined whereNewTest1.html:176

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

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>
    <div id="map_canvas" style="height: 600px"></div>
    <script src="whereNew.js"></script>
    <script src="marketData.js"></script>
    <script>

    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var directionsDisplay = new google.maps.DirectionsRenderer(
        {
            map: map
        });
    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 directionsService = new google.maps.DirectionsService;



        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(' + i + ')">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(i) 
    {
        /* for (var i = 0; i < markerArray.length; i++) 
        {
        markerArray[i].setMap(null);
        } */

        //for (pos in MarketInfo) 
        //{
        var directionsService = new google.maps.DirectionsService();
        var row = MarketInfo[i];
        // Second loop for multiple destination
        var str_array = row[6].split(',');
        for (var j = 0; j < str_array.length; j++) 
        {
            directionsService.route(
            {
            origin: str_array[j],
            destination: row[1],
            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
                });*/
                directionsDisplay.setDirections(response);
                }else 
                {
                    window.alert('Directions request failed due to ' + status);
                }
          });
        }
    //}
    }


    </script>

  <body onload="initialize()">

<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)'] 
];

市场数据.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"]
];

最佳答案

在定义您的 directionsDisplay 时出错。

您应该在 initialize 函数中定义 directionsDisplay 并在定义 directionsDisplay 之前定义 map，如下所示:

function initialize() 
{
   var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
   var directionsDisplay = new google.maps.DirectionsRenderer(
    {
        map: map
    });
   .
   .
   .
}

关于javascript - 未捕获的类型错误 : Cannot read property 'setDirections' of undefined，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45412271/

27 4 0
文章推荐： css - 为什么 ThemeProvider(Material UI)在这里不适合我？
文章推荐： css - webpack encore构建报错: Module build failed: Unclosed block
文章推荐： c# - 在 C# 中获取内存中下一个对象大小的空间
文章推荐： javascript - 将内部作用域变量绑定(bind)到外部作用域 "template"
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com