如何实现与离子和放谷歌地图API V3中心标记;角 [英] How to implement centered marker in Google Maps API v3 with Ionic & Angular

问题描述

我在使用地图API v3和ngCordova让我的当前位置我离子项目，并具有以下code创建一个映射：

  VAR选项= {超时：10000，enablehighAccuracy：假};
    $ cordovaGeolocation.getCurrentPosition（选项）
        。然后（功能（位置）{
            VAR myLat = position.coords.latitude;
            VAR myLong = position.coords.longitude;
            的console.log（myLat，myLong）;
            VAR中心=新google.maps.LatLng（myLat，myLong）;
            VAR的MapOptions = {
                中心：中心，
                变焦：16，
                mapTypeId设为：google.maps.MapTypeId.ROADMAP，
                将streetViewControl：假的，
                MapTypeControl中：假的，
                zoomControl，用于：假的
            };
            VAR地图=新google.maps.Map（的document.getElementById（图）的MapOptions）;
        }，功能（错误）{
            的console.log（ERR）;
        }）;
 

我想此映射为地图上摇摆，这将保持居中（类似于Hailo，乌伯及其他）上创建的标记，使得用户可以通过移动地图简单地定义一个特定的位置。我找不到这样做的地图API文档或任何教程/提示什么。

任何人都可以提出一个简单的方法来做到这一点？
另外，我是正确的思想，当用户移动地图，地图（标记所在的位置）的中心的新坐标可以检索？

解决方案

这应该做的伎俩。

\r

\r

的Javascript\r
    VAR的选择= {\r
      超时：10000，\r
      enablehighAccuracy：假的\r
    };\r
    $ cordovaGeolocation.getCurrentPosition（选项）\r
      。然后（功能（位置）{\r
          VAR myLat = position.coords.latitude;\r
          VAR myLong = position.coords.longitude;\r
          的console.log（myLat，myLong）;\r
          VAR中心=新google.maps.LatLng（myLat，myLong）;\r
          VAR的MapOptions = {\r
            中心：中心，\r
            变焦：16，\r
            mapTypeId设为：google.maps.MapTypeId.ROADMAP，\r
            将streetViewControl：假的，\r
            MapTypeControl中：假的，\r
            zoomControl，用于：假的\r
          };\r
          VAR地图=新google.maps.Map（的document.getElementById（图）的MapOptions）;\r
          //这是其中添加所述标记，一个空div被创建，然后加入一类centerMarker'的。 Clickevents注册并绑定到地图。\r
          $（'＆LT; D​​IV /＆GT;'）。addClass（centerMarker'）appendTo（map.getDiv（））\r
            //做一些事情的onclick\r
            。点击（函数（）{\r
              VAR的= $（本）;\r
              如果（！that.data（'双赢'））{\r
                that.data（'双赢'，新google.maps.InfoWindow（{\r
                  内容：这是中心\r
                }））;\r
                that.data（'双赢'）bindTo（'位置'，地图，中心）。\r
              }\r
              that.data（'双赢'）开放（图）。\r
            }）;\r
        }\r
      }，\r
      功能（错误）{\r
        的console.log（ERR）;\r
      }）;

\r

CSS\r
.centerMarker {\r
  位置：绝对的;\r
  / *标记的URL * /\r
  背景：网址（http://maps.gstatic.com/mapfiles/markers2/marker.png）不重复;\r
  / *中心标记* /\r
  顶部：50％;\r
  左：50％;\r
  的z-index：1;\r
  / *修复需要时偏移* /\r
  保证金左：-10px;\r
  的margin-top：-34px;\r
  / *图像大小* /\r
  高度：34像素;\r
  宽度：20像素;\r
  光标：指针;\r
}

\r

\r

\r

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

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?

解决方案

This should do the trick.

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

这篇关于如何实现与离子和放谷歌地图API V3中心标记;角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！