如何使用Ionic& amp;在Google Maps API v3中实现居中标记角度的 [英] How to implement centered marker in Google Maps API v3 with Ionic & Angular

问题描述

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

I have created a map in my Ionic project using Maps API v3 and ngCordova to get my current location and with the following code:

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

I would like to create a marker on this map that will stay centered as the map is panned (similar to Hailo, Uber and others) so that the user can define a specific location simply by moving the map. I cannot find anything in the Maps API docs for this or any tutorials/hints.

有人可以建议一种简单的方法吗? 另外，我是否认为用户移动地图时可以获取地图中心(标记所在的位置)的新坐标?

Can anyone suggest a simple way to do this? Also, am I right in thinking that when the user moves the map, the new coordinates of the centre of the map (where the marker is located) can be retrieved?

推荐答案

这应该可以解决问题.

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

这篇关于如何使用Ionic& amp;在Google Maps API v3中实现居中标记角度的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！