Question

我试图做这样的事情：

我在屏幕右半部分有表格，标记位于屏幕左侧。移动地图 - 标记将保留在左侧的中心，我将从地图移动中的标记（Visualy，但这是偏离中心）获得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％的右侧屏幕。

Answer 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>

抵消谷歌地图和修复标记

1 个答案: