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

【问题标题】：How to implement centered marker in Google Maps API v3 with Ionic & Angular如何使用 Ionic 和 Angular 在 Google Maps API v3 中实现居中标记
【发布时间】：2015-09-02 22:58:37
【问题描述】：

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

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

【问题讨论】：

你可以看看这个：stackoverflow.com/questions/19327254/…
谢谢！这正是我所需要的。知道如何使用 Angular 注入 div 吗？我的地图 div 看起来像这样：
.. 不涉及 Angular 指令。

标签： javascript angularjs google-maps google-maps-api-3 ionic

【解决方案1】：

这应该可以解决问题。

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

【讨论】：