google.maps.LatLng（）无法将参数作为变量，只有直接值才有效

Question

我想输入源和目的地，然后接收地显示源和目的地之间的方向，但问题是google.maps.LatLng（）此函数不接受变量作为参数。如果我传递价值它的工作例如：google.maps.LatLng(35.653341, -97.470570) ........................................ ........

我曾尝试更改var d的数据类型，例如：

var d=document.getElementById("destlat").value;

它不起作用

我也试过google.maps.LatLng('arr[a]', 'arr[b]');它也不行

function initMap() {

alert("WELCOME");
var a=document.getElementById("sourcelon").value;
var b=document.getElementById("sourcelat").value;
var c=document.getElementById("destlon").value;
var d=document.getElementById("destlat").value;
var arr=[a,b,c,d,];
alert(arr);
var pointA = new google.maps.LatLng(arr[a], arr[b]);
var pointB = new google.maps.LatLng(arr[c], arr[d]);
var myOptions = {
  zoom: 7,
  center: pointA
},
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
// Instantiate a directions service.
directionsService = new google.maps.DirectionsService,
directionsDisplay = new google.maps.DirectionsRenderer({
  map: map
}),
markerA = new google.maps.Marker({
  position: pointA,
  title: "point A",
  label: "Source",
  map: map
}),
markerB = new google.maps.Marker({
  position: pointB,
  title: "point B",
  label: "Destination",
  map: map
});

我想动态地传递经度和纬度以起作用但它不起作用

Answer 1

您的代码中存在拼写错误。 pointA（和pointB）应该是

• new google.maps.LatLng(b, a); // lat/lng（通知不是来自阵列）

要么

• new google.maps.LatLng(arr[1], arr[0]); // lat/lng

不：

var pointA = new google.maps.LatLng(arr[a], arr[b]);

proof of concept fiddle

代码段：

function initMap() {

  var a = document.getElementById("sourcelon").value;
  var b = document.getElementById("sourcelat").value;
  var c = document.getElementById("destlon").value;
  var d = document.getElementById("destlat").value;
  var arr = [a, b, c, d, ];
  var pointA = new google.maps.LatLng(arr[1], arr[0]);
  var pointB = new google.maps.LatLng(arr[3], arr[2]);
  var myOptions = {
      zoom: 7,
      center: pointA
    },
    map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
    // Instantiate a directions service.
    directionsService = new google.maps.DirectionsService,
    directionsDisplay = new google.maps.DirectionsRenderer({
      map: map
    }),
    markerA = new google.maps.Marker({
      position: pointA,
      title: "point A",
      label: "Source",
      map: map
    }),
    markerB = new google.maps.Marker({
      position: pointB,
      title: "point B",
      label: "Destination",
      map: map
    });
}

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

#map-canvas {
  height: 90%;
  margin: 0;
  padding: 0;
}

<!--
New York, NY, USA (40.7127753, -74.0059728)
Newark, NJ, USA (40.735657, -74.1723667)
-->
<input id="sourcelat" value="40.7127753" size="10" />
<input id="sourcelon" value="-74.0059728" size="10" />
<input id="destlat" value="40.735657" size="10" />
<input id="destlon" value="-74.1723667" size="10" />
<div id="map-canvas"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>