如何使用Ionic＆Angular在Google Maps API v3中实现居中标记

debugcn 发表于 Dev

用户名

我已使用Maps API v3和ngCordova在Ionic项目中创建了地图，以获取当前位置并使用以下代码：

    var options = {timeout: 10000, enablehighAccuracy: false};
    $cordovaGeolocation.getCurrentPosition(options)
        .then(function (position) {
            var myLat = position.coords.latitude;
            var myLong = position.coords.longitude;
            console.log(myLat, myLong);
            var center = new google.maps.LatLng(myLat, myLong);
            var mapOptions = {
                center: center,
                zoom: 16,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                streetViewControl: false,
                mapTypeControl: false,
                zoomControl: false
            };
            var map = new google.maps.Map(document.getElementById("map"), mapOptions);
        }, function (err) {
            console.log(err);
        });

我想在此地图上创建一个标记，该标记将在平移地图时保持居中状态（类似于Hailo，Uber等），以便用户只需移动地图即可定义特定位置。我在Maps API文档中找不到此内容或任何教程/提示。

谁能建议一个简单的方法来做到这一点？另外，我是否认为用户移动地图时可以检索地图中心（标记所在的位置）的新坐标？

马蒂斯·罗格斯（Mathijs Rutgers）

这应该可以解决问题。

Javascript
    var options = {
      timeout: 10000,
      enablehighAccuracy: false
    };
    $cordovaGeolocation.getCurrentPosition(options)
      .then(function(position) {
          var myLat = position.coords.latitude;
          var myLong = position.coords.longitude;
          console.log(myLat, myLong);
          var center = new google.maps.LatLng(myLat, myLong);
          var mapOptions = {
            center: center,
            zoom: 16,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            streetViewControl: false,
            mapTypeControl: false,
            zoomControl: false
          };
          var map = new google.maps.Map(document.getElementById("map"), mapOptions);
          //This is where the marker is added, an empty div is created, then a class of 'centerMarker' is added. Clickevents are registered and bound to the map.    
          $('<div/>').addClass('centerMarker').appendTo(map.getDiv())
            //do something onclick
            .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);
            });
        }
      },
      function(err) {
        console.log(err);
      });

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