Доступ к переменным из других функций JavaScript

Question

Я новичок в java-скрипте, извините, если Q глупый.в моем коде у меня есть центральная позиция с широтой и длиной, у меня есть еще одна функция для обновления центральной позиции.проблема: я хочу изменить положение маркера из центрального положения в новое центральное положение при вызове функции pan ().

var panPoint;

function myMap() {
    var Center = new google.maps.LatLng(32.224063, 35.230539);
    var mapProp = {
        zoom: 8,
        center: Center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var canvas = document.getElementById("googleMap");
    map = new google.maps.Map(canvas, mapProp);
    var marker = new google.maps.Marker({
        position: Center
    });
    marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', myMap);

function pan() {
    panPoint = new google.maps.LatLng(document.getElementById("lat").value, document.getElementById("lng").value);
    map.panTo(panPoint)
}

Answer 1

Если вы также хотите изменить положение маркера, вам нужно сделать ссылку на него глобальной (как вы сделали с panPoint), определить его вне каких-либо функций, убрать var перед ним внутри ваша myMap функция. Обратите внимание, что вам также нужно сделать глобальным map, чтобы центр действительно изменился.

var marker;

function myMap() {
  var Center = new google.maps.LatLng(32.224063, 35.230539);
  var mapProp = {
    zoom: 8,
    center: Center,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var canvas = document.getElementById("googleMap");
  map = new google.maps.Map(canvas, mapProp);
  marker = new google.maps.Marker({
    position: Center
  });
  marker.setMap(map);
}

Затем переместите его при вызове функции pan:

function pan() {
  panPoint = new google.maps.LatLng(document.getElementById("lat").value, document.getElementById("lng").value);
  marker.setPosition(panPoint);
  map.panTo(panPoint)
}

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

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

var panPoint;
var map;
var marker;

function myMap() {
  var Center = new google.maps.LatLng(32.224063, 35.230539);
  var mapProp = {
    zoom: 8,
    center: Center,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var canvas = document.getElementById("googleMap");
  map = new google.maps.Map(canvas, mapProp);
  marker = new google.maps.Marker({
    position: Center
  });
  marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', myMap);

function pan() {
  panPoint = new google.maps.LatLng(document.getElementById("lat").value, document.getElementById("lng").value);
  marker.setPosition(panPoint);
  map.panTo(panPoint)
}

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="lat" value="32.224063" />
<input id="lng" value="35.230539" />
<input id="btn" type="button" onClick="pan();" value="pan" />
<div id="googleMap"></div>