Есть ли способ скорректировать маркер Google Maps в Центр его карты?

Чтобы быть более точным, я пытаюсь добиться того, что в то время как я Перетащить на карту Google есть Google Maps Маркер, который остается фиксированным в центре карты на все время. По моему мнению, это улучшит работу пользователя. Вот как я это делаю сейчас:

var map, marker, options;

options = {
  center: new google.maps.LatLng(latitude, longitude),
  zoom: 15,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  mapTypeControl: false,
  overviewMapControl: false,
  zoomControl: true,
  draggable: true
};

map = new google.maps.Map(mapContainer, options);

marker = new google.maps.Marker({
  position: new google.maps.LatLng(latitude, longitude),
  map: map,
  animation: google.maps.Animation.DROP
});

//This line is what makes the Marker stick to the center of the map
marker.bindTo('position', map, 'center');

Проблема с этим кодом заключается в том, что.. Когда я перетаскиваю карту под маркером , она не достаточно гладкая, т.е. Маркер совершает странный прыжок из "последнего" центра в "новый" центр при перетаскивании концов. (это более заметно на мобильных устройствах). Поэтому мне нужно, чтобы маркер действительно постоянно фиксировался в Центре его карты.

Есть ли способ сделать это? (Я думаю, что видел это на веб-сайте один раз)

Сообщите мне, если вы, ребята, можете мне помочь.

Спасибо.

Ответы

Ответ 1

Другой подход, который не использовал реальный google.maps.Marker:

после того, как карта была инициализирована, введите div в контейнер-карту, дайте ей имя класса (например, centerMarker), дальнейшие действия будут выполняться с помощью CSS:

.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;
}

Демо: http://jsfiddle.net/doktormolle/jcHqt/

Ответ 2

Вместо того, чтобы вводить HTML-компонент, как было предложено в ответе @Dr.Molle, почему бы вам не использовать только CSS-решение.

Это проще, эффективнее и не требует, чтобы вы даже касались DOM (поэтому не будет никаких проблем, если Google изменит их реализацию).

Также, поскольку Google Maps не применяет никаких стилей к элементу контейнера (#map), решение довольно безопасно.

#map {
    position: relative;
}

#map:after {
    width: 22px;
    height: 40px;
    display: block;
    content: ' ';
    position: absolute;
    top: 50%; left: 50%;
    margin: -40px 0 0 -11px;
    background: url('https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi_hdpi.png');
    background-size: 22px 40px; /* Since I used the HiDPI marker version this compensates for the 2x size */
    pointer-events: none; /* This disables clicks on the marker. Not fully supported by all major browsers, though */
}

Вот jsFiddle.

Ответ 3

Вы можете прослушивать изменения центра через что-то вроде ниже, вам просто нужно обновить представление:

google.maps.event.addListener(map, "dragend", function() {
   console.log(map.getCenter().toUrlValue());
});

Текущее основное используемое решение состоит в том, чтобы воспитывать InfoWindow только тогда, когда onclick, я нуждался в нем все время, как на Uber, поэтому я заменил даже InfoWindow на единственное решение css, обновив представление обычным angular маршрут с ионом

HTML:

 <ion-content >
   <div id="map" data-tap-disabled="true">
  </div>
  <div id="centerInfoBubble">
    <span>{{locationCtrl.coordinates}}</span>
  </div>
  <div id="centerMarker"></div>
 </div>
 </ion-content>

CSS

#map {
 width: 100%;
 height: 100%;
}
#centerInfoBubble {
  position: absolute;
  /*center the marker*/
 top: 38%;
 left: 22.5%;
 z-index: 1;
 width: 50%;
 height: 6%;
 border-radius: 20px;
 border: 1px solid #111;
 background-color: #444444;
 color: #fff;
 padding: 0.5% 5%;
 cursor: pointer;
}
#centerMarker {
 position: absolute;
 /*url of the marker*/
 background: url(http://maps.gstatic.com/mapfiles/markers2/marker.png) no-repeat;
 /*center the marker*/
 top: 45%;
 left: 45%;
 z-index: 1;
 height: 10%;
 width: 10%;
 cursor: pointer;
}

Контроллер:

myModule.controller('LocationCtrl',['$scope','$cordovaGeolocation',function($scope,$cordovaGeolocation){
$scope.locationCtrl = {
    coordinates : null
};
var options = {timeout: 10000, enableHighAccuracy: true};
var marker;

$cordovaGeolocation.getCurrentPosition(options).then(function(position){

    var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

    var mapOptions = {
            center : latLng,
            zoom : 16,
            mapTypeId : google.maps.MapTypeId.ROADMAP,
            mapTypeControl : false,
            streetViewControl : false,
            zoomControl : false
    };

    $scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);
    $scope.locationCtrl.coordinates = $scope.map.getCenter().toUrlValue();

    google.maps.event.addListener($scope.map, "dragend", function() {
        $scope.locationCtrl.coordinates = $scope.map.getCenter().toUrlValue();
        $scope.$apply();
    });

}, function(error){
console.log("Could not get location");
});

}]);

Я не знаю, есть ли проблемы с производительностью, но выглядит довольно гладко на устройстве, надеюсь, что это поможет кому-то.

Ответ 4

Если это может помочь, я сделал следующее:

const myLatLng = {lat: 42, lng: 42};

map = new google.maps.Map(document.getElementById('map'), {
  center: myLatLng,
  zoom: 14,
});

marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
});

map.addListener('center_changed', () => {
  marker.setPosition(map.getCenter())
})