web-dev-qa-db-ja.com

Googleマップマーカーを常にマップの中心に固定する方法はありますか？

もっと正確に言うと、私が達成しようとしているのは、Drag Google MapsがありますMarker常にマップの中心に固定されたままになります。これは私の意見ではユーザーエクスペリエンスを向上させます、これは私が今それをやっている方法です：

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

上記のコードの問題は、..マーカーの下にマップをドラッグすると十分に滑らかではない、つまりドラッグが終了すると、マーカーは「最後」のセンターから「新しい」センターへとジャンプジャンプします。 （これはモバイルデバイスでより顕著になります）。したがって、必要なのは、マーカーが本当に永続的に固定マップの中心にあることです。

これを行う方法はありますか？ （私はこれを一度ウェブサイトで見たと思う）

皆さんが私を助けてくれたら教えてください。

ありがとうございました。

javascriptgoogle-mapsmobilegoogle-maps-api-3
29
jlstr

実際のgoogle.maps.Markerを使用しなかった別のアプローチ：

マップが初期化された後、divをmap-containerに挿入し、className（e.g。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/

34
Dr.Molle

@ Dr.Molle'sの回答で提案されているHTMLコンポーネントを注入するのではなく、CSSのみのソリューションを使用してみませんか。

よりシンプルで効率的で、DOMに触れる必要さえありません（したがって、Googleが実装を変更しても問題はありません） 。

また、Googleマップはコンテナ要素にスタイルを適用しないため（#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 です。

36
Itay Grudev

以下のような方法でセンターの変更を聞くことができます。ビューを更新するだけです。

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

現在主に使用されているソリューションは、onclickのときにのみInfoWindowを起動するためです。Uberのように常に必要なので、InfoWindowでもCSSのみのソリューションに置き換えて、ビューをnormal angular 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;
}

コントローラ：

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

}]);

これにパフォーマンスの問題があるかどうかはまだわかりませんが、デバイス上では非常に滑らかに見えます。

6
Mahlatse Makalancheche

これが役立つ場合、私がしたことは：

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

Googleマップのドラッグイベントを使用できます。

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