javascript - Uncaught InvalidValueError: in property origins: at index 0: not a string, and not a LatLng or LatLngLiteral: not a-369IT编程

admin管理员组
文章数量:1023758

I am writing a basic JavaScript program which finds the distance between two postcodes. The code is below:

index.html

    <!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="maps.css">
        <script src=".exp&sensor=false"></script>
        <script src="maps.js" type="text/javascript"></script>
        <title>CalcuTrip</title>
    </head>
    <body>
        <label>Postcode 1</label>
        <input id="orig" type="text">
        <label>Postcode 2</label>
        <input id="dest" type="text">
        <label>Get Distance!</label>
        <input type="button" value="Calculate Distance" onclick="callback()">
        <input id="dist" type="text">
    </body>
</html>

maps.js

var origin = document.getElementById("orig"),
    destination = document.getElementById("dest"),
    service = new google.maps.DistanceMatrixService();

service.getDistanceMatrix(
    {
        origins: [origin],
        destinations: [destination],
        travelMode: google.maps.TravelMode.DRIVING,
        avoidHighways: false,
        avoidTolls: false,
        unitSystem: google.maps.UnitSystem.IMPERIAL
    }, 
    callback
);

function callback(response, status) {
    var orig = document.getElementById("orig"),
        dest = document.getElementById("dest"),
        dist = document.getElementById("dist");

    if(status=="OK") {
        orig.value = response.originAddresses[0];
        dest.value = response.destinationAddresses[0];
        dist.value = response.rows[0].elements[0].distance.text;
    } else {
        alert("Error: " + status);
    }
}

Whenever I run this I get the following error in the Chrome console window:

Uncaught InvalidValueError: in property origins: at index 0: not a string, and not a LatLng or LatLngLiteral: not an Object

I am by no means a JavaScript expert but in my mind the input boxes are already of type text so there is a string element present although at runtime the initial values will be nothing.

Any suggestions or tips on improving would be greatly appreciated.

many thanks.

I am writing a basic JavaScript program which finds the distance between two postcodes. The code is below:

index.html

    <!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="maps.css">
        <script src="https://maps.googleapis./maps/api/js?v=3.exp&sensor=false"></script>
        <script src="maps.js" type="text/javascript"></script>
        <title>CalcuTrip</title>
    </head>
    <body>
        <label>Postcode 1</label>
        <input id="orig" type="text">
        <label>Postcode 2</label>
        <input id="dest" type="text">
        <label>Get Distance!</label>
        <input type="button" value="Calculate Distance" onclick="callback()">
        <input id="dist" type="text">
    </body>
</html>

maps.js

var origin = document.getElementById("orig"),
    destination = document.getElementById("dest"),
    service = new google.maps.DistanceMatrixService();

service.getDistanceMatrix(
    {
        origins: [origin],
        destinations: [destination],
        travelMode: google.maps.TravelMode.DRIVING,
        avoidHighways: false,
        avoidTolls: false,
        unitSystem: google.maps.UnitSystem.IMPERIAL
    }, 
    callback
);

function callback(response, status) {
    var orig = document.getElementById("orig"),
        dest = document.getElementById("dest"),
        dist = document.getElementById("dist");

    if(status=="OK") {
        orig.value = response.originAddresses[0];
        dest.value = response.destinationAddresses[0];
        dist.value = response.rows[0].elements[0].distance.text;
    } else {
        alert("Error: " + status);
    }
}

Whenever I run this I get the following error in the Chrome console window:

Uncaught InvalidValueError: in property origins: at index 0: not a string, and not a LatLng or LatLngLiteral: not an Object

I am by no means a JavaScript expert but in my mind the input boxes are already of type text so there is a string element present although at runtime the initial values will be nothing.

Any suggestions or tips on improving would be greatly appreciated.

many thanks.

Share Improve this question asked Dec 8, 2013 at 0:56 user2280642 851 gold badge1 silver badge6 bronze badges

input elements are objects of type htmlElements I think. They are not the text that you're thinking. I think you can do like.. origin.value to get the string out. – user1600124 Commented Dec 8, 2013 at 1:59

Add a ment |

1 Answer 1

Sorted by: Reset to default 1

You need to wait until the DOM has rendered before accessing it
You can't just call the callback to the DirectionsMatrix, you need to send the request with the updated data

if you want the text value of a input element you need to get .value

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="https://maps.googleapis./maps/api/js?v=3&sensor=false"></script>
<script type="text/javascript">
var service = new google.maps.DistanceMatrixService();

function calculateDistance(){
  var origin = document.getElementById("orig").value;
  var destination = document.getElementById("dest").value;
  service.getDistanceMatrix(
    {
        origins: [origin],
        destinations: [destination],
        travelMode: google.maps.TravelMode.DRIVING,
        avoidHighways: false,
        avoidTolls: false,
        unitSystem: google.maps.UnitSystem.IMPERIAL
    }, 
    callback
  );
}
function callback(response, status) {
  var orig = document.getElementById("orig"),
      dest = document.getElementById("dest"),
      dist = document.getElementById("dist");

  if(status=="OK") {
      orig.value = response.originAddresses[0];
      dest.value = response.destinationAddresses[0];
      dist.value = response.rows[0].elements[0].distance.text;
  } else {
      alert("Error: " + status);
  }
}
google.maps.event.addDomListener(window,"load", calculateDistance);
</script>
        <title>CalcuTrip</title>
    </head>
    <body>
        <label>Postcode 1</label>
        <input id="orig" type="text" value="KA12 6QE">
        <label>Postcode 2</label>
        <input id="dest" type="text" value="SW1A 0AA"> "WC1X 9NT"
        <label>Get Distance!</label>
        <input type="button" value="Calculate Distance" onclick="calculateDistance()">
        <input id="dist" type="text">
    </body>
</html>

I am writing a basic JavaScript program which finds the distance between two postcodes. The code is below:

index.html

    <!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="maps.css">
        <script src=".exp&sensor=false"></script>
        <script src="maps.js" type="text/javascript"></script>
        <title>CalcuTrip</title>
    </head>
    <body>
        <label>Postcode 1</label>
        <input id="orig" type="text">
        <label>Postcode 2</label>
        <input id="dest" type="text">
        <label>Get Distance!</label>
        <input type="button" value="Calculate Distance" onclick="callback()">
        <input id="dist" type="text">
    </body>
</html>

maps.js

var origin = document.getElementById("orig"),
    destination = document.getElementById("dest"),
    service = new google.maps.DistanceMatrixService();

service.getDistanceMatrix(
    {
        origins: [origin],
        destinations: [destination],
        travelMode: google.maps.TravelMode.DRIVING,
        avoidHighways: false,
        avoidTolls: false,
        unitSystem: google.maps.UnitSystem.IMPERIAL
    }, 
    callback
);

function callback(response, status) {
    var orig = document.getElementById("orig"),
        dest = document.getElementById("dest"),
        dist = document.getElementById("dist");

    if(status=="OK") {
        orig.value = response.originAddresses[0];
        dest.value = response.destinationAddresses[0];
        dist.value = response.rows[0].elements[0].distance.text;
    } else {
        alert("Error: " + status);
    }
}

Whenever I run this I get the following error in the Chrome console window:

Uncaught InvalidValueError: in property origins: at index 0: not a string, and not a LatLng or LatLngLiteral: not an Object

I am by no means a JavaScript expert but in my mind the input boxes are already of type text so there is a string element present although at runtime the initial values will be nothing.

Any suggestions or tips on improving would be greatly appreciated.

many thanks.

I am writing a basic JavaScript program which finds the distance between two postcodes. The code is below:

index.html

    <!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="maps.css">
        <script src="https://maps.googleapis./maps/api/js?v=3.exp&sensor=false"></script>
        <script src="maps.js" type="text/javascript"></script>
        <title>CalcuTrip</title>
    </head>
    <body>
        <label>Postcode 1</label>
        <input id="orig" type="text">
        <label>Postcode 2</label>
        <input id="dest" type="text">
        <label>Get Distance!</label>
        <input type="button" value="Calculate Distance" onclick="callback()">
        <input id="dist" type="text">
    </body>
</html>

maps.js

var origin = document.getElementById("orig"),
    destination = document.getElementById("dest"),
    service = new google.maps.DistanceMatrixService();

service.getDistanceMatrix(
    {
        origins: [origin],
        destinations: [destination],
        travelMode: google.maps.TravelMode.DRIVING,
        avoidHighways: false,
        avoidTolls: false,
        unitSystem: google.maps.UnitSystem.IMPERIAL
    }, 
    callback
);

function callback(response, status) {
    var orig = document.getElementById("orig"),
        dest = document.getElementById("dest"),
        dist = document.getElementById("dist");

    if(status=="OK") {
        orig.value = response.originAddresses[0];
        dest.value = response.destinationAddresses[0];
        dist.value = response.rows[0].elements[0].distance.text;
    } else {
        alert("Error: " + status);
    }
}

Whenever I run this I get the following error in the Chrome console window:

Uncaught InvalidValueError: in property origins: at index 0: not a string, and not a LatLng or LatLngLiteral: not an Object

I am by no means a JavaScript expert but in my mind the input boxes are already of type text so there is a string element present although at runtime the initial values will be nothing.

Any suggestions or tips on improving would be greatly appreciated.

many thanks.

Share Improve this question asked Dec 8, 2013 at 0:56 user2280642 851 gold badge1 silver badge6 bronze badges

input elements are objects of type htmlElements I think. They are not the text that you're thinking. I think you can do like.. origin.value to get the string out. – user1600124 Commented Dec 8, 2013 at 1:59

Add a ment |

1 Answer 1

Sorted by: Reset to default 1

You need to wait until the DOM has rendered before accessing it
You can't just call the callback to the DirectionsMatrix, you need to send the request with the updated data

if you want the text value of a input element you need to get .value

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="https://maps.googleapis./maps/api/js?v=3&sensor=false"></script>
<script type="text/javascript">
var service = new google.maps.DistanceMatrixService();

function calculateDistance(){
  var origin = document.getElementById("orig").value;
  var destination = document.getElementById("dest").value;
  service.getDistanceMatrix(
    {
        origins: [origin],
        destinations: [destination],
        travelMode: google.maps.TravelMode.DRIVING,
        avoidHighways: false,
        avoidTolls: false,
        unitSystem: google.maps.UnitSystem.IMPERIAL
    }, 
    callback
  );
}
function callback(response, status) {
  var orig = document.getElementById("orig"),
      dest = document.getElementById("dest"),
      dist = document.getElementById("dist");

  if(status=="OK") {
      orig.value = response.originAddresses[0];
      dest.value = response.destinationAddresses[0];
      dist.value = response.rows[0].elements[0].distance.text;
  } else {
      alert("Error: " + status);
  }
}
google.maps.event.addDomListener(window,"load", calculateDistance);
</script>
        <title>CalcuTrip</title>
    </head>
    <body>
        <label>Postcode 1</label>
        <input id="orig" type="text" value="KA12 6QE">
        <label>Postcode 2</label>
        <input id="dest" type="text" value="SW1A 0AA"> "WC1X 9NT"
        <label>Get Distance!</label>
        <input type="button" value="Calculate Distance" onclick="calculateDistance()">
        <input id="dist" type="text">
    </body>
</html>

本文标签：

版权声明：本文标题：javascript - Uncaught InvalidValueError: in property origins: at index 0: not a string, and not a LatLng or LatLngLiteral: not a 内容由热心网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://it.en369.cn/questions/1745543763a2155300.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

369IT编程

javascript - Uncaught InvalidValueError: in property origins: at index 0: not a string, and not a LatLng or LatLngLiteral: not a

1 Answer 1

1 Answer 1

更多相关文章

flutter - Is there any method or flag to determine app is opened by deeplink? - Stack Overflow

javascript - Use NODE_ENV in source code to control build process with Webpack - Stack Overflow

javascript - How to embed RTMP video stream player on webpage? - Stack Overflow

color for selected file in visual studio - Stack Overflow

javascript - Delete first page in JQuery Mobile history - Stack Overflow

javascript - How to get entered value after onkeydown? - Stack Overflow

How to fix NJS-505: unable to initiate TLS connection. Please check if wallet credentials are valid in node-oracledb - Stack Ove

javascript - How to fix in Tailwindcss div height overflows parent div - Stack Overflow

html - Replacing jQuery slideToggle() with vanilla Javascript - Stack Overflow

javascript - React: HTML not rendering correctly - Stack Overflow

javascript - Angular Slider Touch not working with directive - Stack Overflow

javascript - Jquery datepicker execute function on load - Stack Overflow

capabilities - Notice: Undefined property: stdClass::$delete_posts with custom post type

javascript - Feathers Js Restrict Access To Page on Server Side - Stack Overflow

python - Download a PDF with selenium - Stack Overflow

javascript - Datepicker not refreshing data - Stack Overflow

html - How do you find the number of users that have disabled JavaScript in the browser? - Stack Overflow

javascript - gulp-uglify won&#39;t preserve files order - Stack Overflow

c# - Rotate a 3D Vector around Axis and degrees - Stack Overflow

javascript - Rx.Observable.bindCallback with scope in rxjs - Stack Overflow

发表评论

推荐文章

javascript - Show a loading GIF BeforeUnload Of a Page - Stack Overflow

javascript - React Enzyme get all classes even if passed by other components - Stack Overflow

Special link for no automatic login (no username and no password)

Quickest way to get last or oldest post date - WP Query

slideshow - remove slider mobile not via css

热门文章

Very slow query generated getting meta data from posts

ssis - Why remote SQL Server is not accepting connections without user logged into the server - Stack Overflow

javascript - Crop the image in irregular shape and stretch it - Stack Overflow

highcharts-export-server dispaly #15 error (Sorting) on exported image - Stack Overflow

javascript - Angular: Better way to limit number to two decimals on input? - Stack Overflow

javascript - How to open a Bootstrap Modal on change of select Box - Stack Overflow

javascript - Using $(this).find with .click() jQuery - Stack Overflow

screen layout - White space at the top of the page

javascript - How to focus and navigate li elements in Angular 4? - Stack Overflow

android - What functions does google play billling call when in &quot;test subscription renewal&quot; after the first re

最新文章

windows设置断电重启开机后自动输入锁屏密码登录

Windows系统设置开机默认开启数字小键盘

Windows11 开机自动同步时间（开机时间不更新问题）

windows配置开机自启动软件或脚本

【Redis】Windows设置Redis为开机自启动

程序员刚毕业，先去大厂镀金还是先去小厂攒经验？

万象2008清空boss账户密码

【Tools】GitBook简明教程

oracle exadata celldisk 闪存盘受损导致性能下降

SDUT 2138 图结构练习——BFSDFS——判断可达性

c# - Using Buildconfiguration instead of launchsettings.json for Settings for RemoteDebbuging - Stack Overflow

javascript - Integrating react-cookie with react redux - Stack Overflow

javascript - UTF8 character encoding using node Request module - Stack Overflow

c# - How to convert a coord in native DPI to one in WPF logic DPI? - Stack Overflow

javascript - Uncaught TypeError: arr.filter is not a function - Stack Overflow

javascript - gulp-uglify won't preserve files order - Stack Overflow

android - What functions does google play billling call when in "test subscription renewal" after the first re