Question

我是java脚本的新手，对不起，如果Q愚蠢。在我的代码中我有一个lat和long的中心位置，我有另一个功能来更新中心位置。问题：我想在调用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)
}

proof of concept fiddle

代码段

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>

从其他函数javascript访问变量

1 个答案: