web-dev-qa-db-fra.com

Existe-t-il un moyen de toujours fixer un marqueur Google Maps au centre de sa carte?

Pour être plus précis, ce que j'essaie d'accomplir, c'est que pendant que je Glisse une carte Google, il y a une carte Google Marqueur qui reste fixe au centre de la carte à tout moment . Cela améliorera l'expérience utilisateur à mon avis, voici comment je le fais maintenant:

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');

Le problème que j'ai avec le code ci-dessus est que .. Lorsque je fais glisser la carte sous le marqueur ce n'est pas assez lisse, c'est-à-dire. le marqueur fait un saut bizarre du "dernier" centre au "nouveau" centre lorsque le glissement se termine. (ceci est plus visible sur les appareils mobiles), donc ce dont j'ai besoin, c'est que le marqueur soit vraiment fixe au centre de sa carte.

Existe-t-il un moyen d'y parvenir? (Je pense avoir déjà vu cela sur un site Web)

Faites-moi savoir si vous pouvez m'aider.

Je vous remercie.

javascriptgoogle-mapsmobilegoogle-maps-api-3
29
jlstr

Une approche différente, qui n'utilisait pas de véritable google.maps.Marker:

après l'initialisation de la carte, injectez un div dans le conteneur de carte, donnez-lui un nom de classe (par exemple centerMarker), les autres choses se feront via 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;
}

Démo: http://jsfiddle.net/doktormolle/jcHqt/

34
Dr.Molle

Plutôt que d'injecter un composant HTML comme suggéré dans la réponse @ Dr.Molle , pourquoi n'utilisez-vous pas une solution CSS uniquement.

C'est plus simple, plus efficace et ne vous oblige même pas à toucher le DOM (donc il n'y aura aucun problème si Google modifie leur implémentation) .

De plus, puisque Google Maps n'applique aucun style à l'élément conteneur (#map) la solution est assez sûre.

#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 */
}

Voici un jsFiddle .

36
Itay Grudev

Vous pouvez écouter les changements du centre via quelque chose comme ci-dessous, il vous suffira de mettre à jour votre vue:

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

La principale solution actuellement utilisée est de faire apparaître InfoWindow uniquement en cas de clic, j'en avais besoin tout le temps comme sur Uber, j'ai donc remplacé même InfoWindow par une solution CSS uniquement, mettant à jour la vue normale angular route avec Ionic

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

Manette:

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");
});

}]);

Je ne sais pas encore s'il y a des problèmes de performances, mais cela semble assez fluide sur l'appareil, j'espère que cela aide quelqu'un

6
Mahlatse Makalancheche

Si cela peut vous aider, voici ce que j'ai fait:

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())
})
1
mkkr

Vous pouvez utiliser l'événement de glissement de Google Map:

google.maps.event.addListener(map, 'dragend', function() {
    marker.setPosition(map.getCenter()); 
} );
0
brook