Question

我使用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文档中找不到任何有关此内容或任何教程/提示的内容。

有人能建议一个简单的方法吗？另外，我是否正确地认为当用户移动地图时，可以检索地图中心的新坐标（标记所在的位置）？

Answer 1

这应该可以解决问题。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: