1

我想在谷歌地图中心保持大头针不变，而用户可以移动地图并四处缩放。关键是引脚的当前 GPS 位置（当然仍然在中心）以递归方式返回为值。我找到了这个

Google Map API V2 - 当用户滚动地图时，如何在屏幕中央保留一个标记？

但是我这不会返回当前的中心坐标。我正在寻找带有代码的演示实现，但找不到任何东西，非常感谢帮助。

4

1 回答 1

2

从daftlogic.com 上的这个示例，修改为使用标记而不是十字准线，将中心坐标放在页面上的 HTML 元素中。

要点：

  1. 标记绑定到地图的中心
  2. 'center_changed' 用于更新页面上显示的坐标。

工作片段：

function initialize() {
  var crosshairShape = {
    coords: [0, 0, 0, 0],
    type: 'rect'
  };
  var latlng = new google.maps.LatLng(54.62279178711505, -5.895538330078125);
  var myOptions = {
    zoom: 12,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    }
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  var marker = new google.maps.Marker({
    map: map,
  });
  document.getElementById('coordinates').innerHTML = "<b>center coordinates</b>: " + map.getCenter().toUrlValue(6)
  google.maps.event.addListener(map, 'center_changed', function() {
    document.getElementById('coordinates').innerHTML = "<b>center coordinates</b>: " + map.getCenter().toUrlValue(6);
  });
  marker.bindTo('position', map, 'center');
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
<div id="coordinates"></div>

工作jsfiddle

于 2014-11-28T21:43:24.620 回答