偏移谷歌地图并修复标记答案

【问题标题】：Offset google map and fix marker偏移谷歌地图并修复标记
【发布时间】：2018-03-23 10:09:51
【问题描述】：

我正在尝试做这样的事情：

我在屏幕右半边有表格，而标记在屏幕左侧居中。移动地图 - 标记将留在左侧的中心，我将在地图移动时从标记（可视化，但中心偏移）获得LatLng。

现在我在地图上设置了居中标记，我可以移动地图并从中心获取 LatLng。

这是执行此操作的脚本：

            var map = null;
            var marker;

            function showlocation() {
                if ("geolocation" in navigator) {
                    /* geolocation is available */
                    // One-shot position request.
                    navigator.geolocation.getCurrentPosition(callback, error);
                } else {
                    /* geolocation IS NOT available */
                    console.warn("geolocation IS NOT available");
                }
            }

            function error(err) {
                console.warn('ERROR(' + err.code + '): ' + err.message);
            };

            function callback(position) {

                var lat = position.coords.latitude;
                var lon = position.coords.longitude;
                document.getElementById('default_latitude').value = lat;
                document.getElementById('default_longitude').value = lon;
                var latLong = new google.maps.LatLng(lat, lon);
                map.setZoom(16);
                map.setCenter(latLong);
            }
           // google.maps.event.addDomListener(window, 'load', initAutocomplete);


            function initAutocomplete() {
                var mapOptions = {
                    center: new google.maps.LatLng(42.4405026181028, 19.24323633505709),
                    zoom: 16,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById("map"),
                    mapOptions);
                google.maps.event.addListener(map, 'center_changed', function () {
                    document.getElementById('default_latitude').value = map.getCenter().lat();
                    document.getElementById('default_longitude').value = map.getCenter().lng();

                });
                $('<div/>').addClass('centerMarker').appendTo(map.getDiv())
                    .click(function () {
                        var that = $(this);
                        if (!that.data('win')) {
                            that.data('win', new google.maps.InfoWindow({
                                content: 'this is the center'
                            }));
                            that.data('win').bindTo('position', map, 'center');
                        }
                        that.data('win').open(map);
                    });

我的标记以 CSS 为中心：

#map .centerMarker {
    position: absolute;
    /*url of the marker*/
    background: url(http://maps.gstatic.com/mapfiles/markers2/marker.png) no-repeat;
    /*center the marker*/
    top: 50%;
    left: 50%;
    z-index: 1;
    /*fix offset when needed*/
    margin-left: -10px;
    margin-top: -34px;
    /*size of the image*/
    height: 34px;
    width: 20px;
    cursor: pointer;
}

我只需要将所有这些从中心向左偏移 25%，并为表单保留 50% 的右侧屏幕。

【问题讨论】：

可能重复stackoverflow.com/questions/43944655/…
可能重复stackoverflow.com/questions/25992521/…
How to offset the center point in Google maps api V3的可能重复

标签： javascript google-maps

【解决方案1】：

我跳过了您的大部分问题并专注于标题（以及您的最后一行文字）。我写了一个函数，而不是 map.setCenter(marker.getPosition())，而是读取地图的宽度，不是以米为单位，而是以度为单位。然后我将中心设置为标记右侧的一个点。偏移量为地图宽度的 1/4。

所以我们需要找到那个点，然后以那个点为中心。我把它放在一个函数中，这样你就可以在你的代码中使用它（乍一看你的代码）。

这对你有用吗？作为一个例子，我挑选了一些我的键盘上没有的名称没有重音的标记。

<head>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyAxYGlluHcsgR2X9SPX0nATQYRDeJE4u9U" async defer></script>
<script>
var map;
var markers = [];
var venues = [
  {name: 'Hard Rock Cafe', lat: 42.440872894381336, lng: 19.243852126140837},
  {name: 'Hospital', lat: 42.43778998082812, lng: 19.24720468486862},
  {name: 'CRNE Gore', lat: 42.443011545449124, lng: 19.240621744796726},
];
function initMap() {
  var mapOptions = {
    center: new google.maps.LatLng(42.4405026181028, 19.24323633505709),
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map"), mapOptions);
  for(var i in venues) {
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(venues[i].lat, venues[i].lng),
      title: venues[i].name,
      map: map
    });
    markers.push(marker);
    google.maps.event.addListener(marker, 'click', function () {
      var markerPosition = this.getPosition();
      var newCenter = centerWithOffset(markerPosition);
      map.setCenter(newCenter);
      // if you need to know which marker was clicked on:
      // you might need this index to set the data of the infoWindow
      var i = markers.indexOf(this);
      document.getElementById("display").innerHTML = "marker " + i + " was clicked on";
    });
  }
  google.maps.event.addListener(map, 'center_changed', function () {
    document.getElementById("display").innerHTML = map.getCenter().toString();
  });
}
function centerWithOffset(markerPosition) {
  // rather than this center, we want a new center point that is offset by 1 / 4 of the width of the map to the right.
  // @see https://stackoverflow.com/questions/6910847/get-boundaries-longitude-and-latitude-from-current-zoom-google-maps
  var bounds = map.getBounds();
  var ne = bounds.getNorthEast(); // LatLng of the north-east corner
  var sw = bounds.getSouthWest(); // LatLng of the south-west corder
  // calculate width
  var width = ne.lng() - sw.lng();
  // now apply this offset
  var newCenter = new google.maps.LatLng(
    markerPosition.lat(),
    (markerPosition.lng() + (width / 4))
  );
  return newCenter;
}
</script>
<style>
#map {
  width: 700px;
  height: 300px;
}
</style>
</head>
<body>
  <div id="map"></div>
  <div id="display"></div>
</body>

【讨论】：