Question

更准确地说，我尝试完成的是，当我拖动谷歌地图时，有一个谷歌地图标记 始终固定在地图中心的。在我看来，这将改善用户体验，这就是我现在正在做的事情：

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

我在上面的代码中遇到的问题是......当我拖动标记下面的地图时，它不够光滑，即。拖动结束时，标记会从“最后”中心向“新”中心发出奇怪的跳。（这在移动设备上更明显），因此我需要的是标记真正永久固定到其地图中心。

有没有办法完成这项工作？（我想我曾经在一个网站上看过这个）

让我知道如果你们可以帮助我。

谢谢。

Answer 1

另一种不使用真实google.maps.Marker的方法：

在初始化地图之后，将一个div注入map-container，给它一个className（例如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/

Answer 2

不是按照 @ Dr.Molle的答案中的建议注入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。

Answer 3

您可以通过以下内容收听中心更改，您只需更新视图：

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

当前主要使用的解决方案是仅在onclick时调出InfoWindow，我在Uber上一直需要它，所以我甚至将InfoWindow替换为仅css解决方案，更新视图正常的角度路径离子

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

}]);

我不知道这是否存在性能问题，但在设备上看起来非常顺利，希望它有助于某人

Answer 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())
})

Answer 5

您可以使用谷歌地图拖动事件：

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

Answer 6

这是如何使其尽可能平滑，并且您也可以同时获得。

    var map;
    var marker;
    var myInterval = setInterval(move, 1000 / 60);


    function handleEvent(event) {
        var latlng = map.getCenter();
        document.getElementById('lat').value = latlng.lat();
        document.getElementById('lng').value = latlng.lng();
    }



    // Initialize and add the map
    function initMap() {
        var uluru = { lat: -25.344, lng: 131.036 };
        map = new google.maps.Map(
            document.getElementById('map'), { zoom: 4, center: uluru });
        marker = new google.maps.Marker({
            position: uluru,
            map: map,
            animation: google.maps.Animation.DROP
        });
        map.addListener('center_changed', handleEvent);
        document.getElementById('lat').value = "-25.344";
        document.getElementById('lng').value = "131.036";
    }


    function move(){
        try {
          var latlngMAP = map.getCenter();
          var latlngMARKER = marker.getPosition();
          tempLAT = lerp (latlngMARKER.lat(), latlngMAP.lat(), 0.1);
          tempLNG = lerp (latlngMARKER.lng(), latlngMAP.lng(), 0.1);
         var latlng = { lat: tempLAT, lng: tempLNG };
          marker.setPosition(latlng);
        } catch{
        }
    }
    function lerp(start, end, amt) {
         return (1-amt)*start+amt*end
    }

Answer 7

在这里，我添加了具有固定图钉的地理位置按钮地图，以准确定位您的位置

尝试：）

 
function loadScript(src,callback)
{ 
    var script = document.createElement("script");
    script.type = "text/javascript";
    if(callback)script.onload=callback;
    document.getElementsByTagName("head")[0].appendChild(script);
    script.src = src;
}
  
  loadScript('https://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=initialize');

function initialize() 
		{   
    map = new google.maps.Map(document.getElementById('map_canvas'), {
          zoom: 13, 
        });
latitudeTxt=document.getElementById('latitude');
longitudeTxt=document.getElementById('longitude');
        marker = new google.maps.Marker({
          map: map,
          draggable: false,
          animation: google.maps.Animation.DROP,
          position: {lat: 59.327, lng: 18.067}
        });
        var position = marker.getPosition();
        if(typeof position !== 'undefined')
        {
            map.setCenter(marker.getPosition());
        }
 			
      	map.addListener('center_changed', () => {
          
           marker.setPosition(map.getCenter())
            //get current location when we move the map 
            var NewMapCenter = map.getCenter();
           var latitude = NewMapCenter.lat();
					var longitude = NewMapCenter.lng();
           latitudeTxt.innerHTML =latitude;
           longitudeTxt.innerHTML =longitude;
        })
        
        addYourLocationButton(map, marker);
		}

 function geolocate() 
    {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
            var geolocation = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
            };
            map.setCenter(geolocation); 
            });
        }
    }
 
 function addYourLocationButton (map, marker) 
{
    var controlDiv = document.createElement('div');

    var firstChild = document.createElement('button');
    firstChild.style.backgroundColor = '#fff';
    firstChild.style.border = 'none';
    firstChild.style.outline = 'none';
    firstChild.style.width = '28px';
    firstChild.style.height = '28px';
    firstChild.style.borderRadius = '2px';
    firstChild.style.boxShadow = '0 1px 4px rgba(0,0,0,0.3)';
    firstChild.style.cursor = 'pointer';
    firstChild.style.marginRight = '10px';
    firstChild.style.padding = '0';
    firstChild.title = 'Your Location';
    controlDiv.appendChild(firstChild);

    var secondChild = document.createElement('div');
    secondChild.style.margin = '5px';
    secondChild.style.width = '18px';
    secondChild.style.height = '18px';
    secondChild.style.backgroundImage = 'url(https://maps.gstatic.com/tactile/mylocation/mylocation-sprite-2x.png)';
    secondChild.style.backgroundSize = '180px 18px';
    secondChild.style.backgroundPosition = '0 0';
    secondChild.style.backgroundRepeat = 'no-repeat';
    firstChild.appendChild(secondChild);

    google.maps.event.addListener(map, 'center_changed', function () {
        secondChild.style['background-position'] = '0 0';
    });

    firstChild.addEventListener('click', function () {
        var imgX = 0,
            animationInterval = setInterval(function () {
                imgX = -imgX - 18 ;
                secondChild.style['background-position'] = imgX+'px 0';
            }, 500);

        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                map.setCenter(latlng);
                clearInterval(animationInterval);
                secondChild.style['background-position'] = '-144px 0';
            });
        } else {
            clearInterval(animationInterval);
            secondChild.style['background-position'] = '0 0';
        }
    });

    controlDiv.index = 1;
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv);
}

body,html,#map_canvas{height:100%;margin:0;}
#map_canvas .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;
}

<html>
<body>
<div id="map_canvas" style="height:400px"></div>
<div id="latitude">latitude</div>
<br/>
<div id="longitude">longitude</div>
</body> 
</html>

有没有办法将Google地图标记始终修复到其地图中心？

7 个答案: