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

подтверждение концепции скрипки

фрагмент кода:

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>