谷歌地图浮动销在中心和返回位置 [英] google maps float pin at center and return location

问题描述

我希望将此引脚固定在Google地图的中心位置，同时用户可以移动地图并进行缩放。关键是当前GPS引脚的位置（当然中间还是）递归返回值。我发现这个

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

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

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

要点：

1. 标记绑定到地图中心


2. 'center_changed'用于更新页面上显示的坐标。

工作片段：

function initialize（）{var crosshairShape = {coords：[0，0，0 ，0]，请输入：'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>中心坐标< / b> ;:+ map.getCenter（）.toUrlValue（6）google.maps.event.addListener（map，'center_changed'，function （）{document.getElementById（'coordinates'）。innerHTML =< b>中心坐标< / b> ;:+ map.getCenter（）。toUrlValue（6）;}）; marker.bindTo（'position'，map，'center'）;} google.maps.event.addDomListener（window，'load'，initialize）;

  html，body，＃map_canvas {height：500px;宽度：500px; margin：0px; < script src =https：//   

工作jsfiddle

I would like to keep the pin constant in the center of Google maps while the user can move the map and zoom around. Key is that the current GPS location of the pin (in the center still of course) recursively gets returned as value. I found this

Google Map API V2 - How do I keep a marker in the center of the screen while user is scrolling the map?

But I this does not return the current center coordinates. I was looking for a demo implementation with code but can't find anything, would greatly appreciate help.

解决方案

From this example on daftlogic.com, modified to use a marker instead of the crosshairs, put the center coordinates in an HTML element on the page.

Main points:

1. marker is bound to the map's center
2. the 'center_changed' is used to update the coordinates displayed on the page.

Working snippet:

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>

working jsfiddle

这篇关于谷歌地图浮动销在中心和返回位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！