雖然製作路線谷歌地圖通過JavaScript其不工作在鉻，但其工作在Firefox中

Question

代碼在這裏。在本地主機，它工作正常。我所做的只是在Bootstrap Modal中獲取用戶位置，然後爲用戶創建路線圖。

< script src = "https://maps.google.com/maps/api/js?key=***************************&sensor=true" > < /script> < script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" > < /script> <script> 

function calculateRoute(from, to) { 
    var myLatLng = { 
     lat: 26.929307, 
     lng: 75.884867 
    }; 

    // Center initialized to HeiwaHeaven 
    var myOptions = { 
     zoom: 15, 
     center: myLatLng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    // Draw the map 
    var mapObject = new google.maps.Map(document.getElementById("map"), myOptions); 

    var directionsService = new google.maps.DirectionsService(); 
    var directionsRequest = { 
     origin: from, 
     destination: to, 
     travelMode: google.maps.DirectionsTravelMode.DRIVING, 
     unitSystem: google.maps.UnitSystem.METRIC 
    }; 
    directionsService.route(
     directionsRequest, 
     function(response, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 
       new google.maps.DirectionsRenderer({ 
        map: mapObject, 
        directions: response 
       }); 

       $('.distance-in-km').text(response.routes[0].legs[0].distance.value/1000 + "km"); 

       alert(response.routes[0].legs[0].distance.value/1000 + "km"); // the distance in metres 
      } else 
       $("#error").append("Unable to retrieve your route<br />"); 
     } 
    ); 
} 

$(document).ready(function() { 
// If the browser supports the Geolocation API 
if (typeof navigator.geolocation == "undefined") { 
    $("#error").text("Your browser doesn't support the Geolocation API"); 
    return; 
} 

navigator.geolocation.getCurrentPosition(function(position) { 
    var geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({ 
      "location": new google.maps.LatLng(position.coords.latitude, position.coords.longitude) 
     }, 
     function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       calculateRoute(results[0].formatted_address, "Jamdoli Chauraha To Jaisinghpura Khor Road, Near Keshav Vidyapeeth, Jaipur, Agra Rd, Jaipur"); 
      } else { 
       var marker = new google.maps.Marker({ 
        position: myLatLng, 
        title: 'Hello World!' 
       }); 

       marker.setMap(mapObject); 

       $("#error").append("Unable to retrieve your address<br />"); 
      } 
     }); 
}); 

calculateRoute($("#from").val(), "Jamdoli Chauraha To Jaisinghpura Khor Road, Near Keshav Vidyapeeth, Jaipur, Agra Rd, Jaipur"); 

$("#calculate-route").submit(function(event) { 
    event.preventDefault(); 

    calculateRoute($("#from").val(), "Jamdoli Chauraha To Jaisinghpura Khor Road, Near Keshav Vidyapeeth, Jaipur, Agra Rd, Jaipur"); 
}); 

$('.verify-location > a').click(function() { 
    $('.verify-location').hide(); 
    $('#calculate-route').show(); 
}); 
}); < /script> 

和HTML是

<button type="button" class="close" data-dismiss="modal">&times;</button> 
<div class="verify-location">Is the your location incorrect? <a>Click here to enter your location manually</a></div> 
    <form id="calculate-route" name="calculate-route" action="#" method="get"> 
    <label for="from">From:</label> 
     <input type="text" id="from" name="from" placeholder="An address" size="30" /> 
    <button type="submit">Submit</button> 

一旦點擊獲取地圖上的路線按鈕（啓動引導莫代爾），在Firefox中也沒有顯示在地圖上，直到我上，但在點擊鉻它甚至不工作如果我點擊地圖或不。

Answer 1

通常你的代碼不工作，它缺乏邏輯，但我只會指導你。首先你沒有提供正確的HTML，我不能似乎找到地圖DIV因此，如果您還沒有寫道，已經然後在HTML寫這

<div id="map" style="height: 400px; width: 500px;"></div> 

這樣，你的地圖上會顯示在Chrome &火狐我也已經測試過了。 也不要把空間分隔符之後或例如

//This is wrong spacing after "<" or ">"  
< script src = "https://maps.google.com/maps/api/js?key=***************************&sensor=true" > < /script> < script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" > < /script> <script> 

屬性，它應該是

<script src="https://maps.google.com/maps/api/js?key=***************************&sensor=true"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 

現在，當點擊共享位置，並隨後提交按鈕，你將與控制檯錯誤呈現。實際上會有2個錯誤。錯誤主要有以下兩行

1 - ReferenceError: myLatLng is not defined 
2 - ReferenceError: mapObject is not defined 

如果你仔細看，然後你會看到你正在使用香草JS這兩個變量jQuery的。如果你真的想使用它們這樣那麼骯髒的解決將是從他們刪除var關鍵字，如

myLatLng = { 
    lat: 26.929307, 
    lng: 75.884867 
} // NOTE: no VAR in start 
mapObject = new google.maps.Map(document.getElementById("map"), myOptions); // NOTE: no VAR in start 

這樣你當前的腳本將根據你的問題&顯示地圖鉻問工作和Firefox，但它不會在提交時分配您當前或指定的地理位置。爲了實現特定的搜索功能，看到這個鏈接https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple

EDIT1：工作撥弄https://jsfiddle.net/yeoman/070chy95/3/

EDIT2：OP具有在打開自舉莫代爾他的地圖不被顯示的問題。作爲使用地理定位API的OP，他應該在模態打開後請求地理座標。這將通過bootstrap構建回調事件來實現。

$('#myModal').on('shown.bs.modal', function (e) { 
    // code to execute 
    // this is the place where map should ask for geolocation 
}); 

在Firefox 51.0a2測試了和Chrome版本56.0.2924.87