&引用；无法获取属性'；路线'；“未定义或空引用的”；使用Javascript谷歌地图方向服务_Javascript_Html_Google Maps_Ionic Framework_Cross Platform

&引用；无法获取属性'；路线'；“未定义或空引用的”；使用Javascript谷歌地图方向服务

javascript html google-maps ionic-framework

&引用；无法获取属性'；路线'；“未定义或空引用的”；使用Javascript谷歌地图方向服务,javascript,html,google-maps,ionic-framework,cross-platform,Javascript,Html,Google Maps,Ionic Framework,Cross Platform,我有一个爱奥尼亚的页面，显示一个简单的表单，谷歌地图，表单以开始和结束，地图显示路线它在模拟器上工作，但当我在windows phone 10 real设备上测试时，我得到错误“无法获取未定义或空引用的属性'route'” 我的离子模板 <!DOCTYPE html> <html> <head>/*Ionic and custom styles*/</head> <body ng-app="starter" ng-cloak>

我有一个爱奥尼亚的页面，显示一个简单的表单，谷歌地图，表单以开始和结束，地图显示路线

它在模拟器上工作，但当我在windows phone 10 real设备上测试时，我得到错误“无法获取未定义或空引用的属性'route'”

我的离子模板

<!DOCTYPE html>
<html>
<head>/*Ionic and custom styles*/</head>
<body ng-app="starter" ng-cloak>
    <ion-side-menus>
        <ion-side-menu side="left">
            /*Ion-Side-Menu-Code*/
        </ion-side-menu>
        <ion-side-menu-content drag-content="false">
            <ion-nav-view>
                <div class="list has-header">
                    <label class="item item-input">
                        <input id="start" type="text" placeholder="Source">
                    </label>
                    <label class="item item-input">
                        <input id="end" type="text" placeholder="Destination">
                    </label>
                    <label class="item item-input padding">
                        <button id="directionBtn" class="button button-block button-positive" onclick="calculateAndDisplayRoute()">
                            Get Directions
                        </button>
                    </label>
                </div>
                <div id="map"></div>
            </ion-nav-view>
        </ion-side-menu-content>
    </ion-side-menus>
    <script src="js/platformOverrides.js"></script>
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="cordova.js"></script>
    <script src="js/jquery-3.1.1.js"></script>
    <script src="js/app.js"></script>
    <script src="js/approvedRepairShops.js"></script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDSrze8t6-uWobOEaISnvrbAMVZu4O4U7Q&callback=initMap&sensor=false&v=3.5"></script>
</body>
</html>`

    function initMap() {
    directionsService = new google.maps.DirectionsService;
    directionsDisplay = new google.maps.DirectionsRenderer;
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 17,
        center: { lat: 30.044281, lng: 31.340002 },
        disableDefaultUI: true
    });
    directionsDisplay.setMap(map);

    var onChangeHandler = function () {
        calculateAndDisplayRoute(directionsService, directionsDisplay);
    };
    document.getElementById('directionBtn').addEventListener('click', onChangeHandler);
}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    directionsService.route({
        origin: document.getElementById('start').value,
        destination: document.getElementById('end').value,
        travelMode: 'DRIVING'
    }, function (response, status) {
        if (status === 'OK') {
            directionsDisplay.setDirections(response);
        } else {
            window.alert('Directions request failed due to ' + status);
        }
    });

}