如何添加标记到谷歌地图？ [英] How do I add markers to a Google Map?

问题描述

我想有一个输入字段提交时增加了一个标记，以我的谷歌地图。现在，当我提出这是创建对象的字段，但不被显示的标记。现在我能得到一个位置显示出来，如果​​它是硬codeD而不是当我添加一个新的。 （我知道的观点，现在只是针对硬盘codeD之一，我有那么目前的code工作）

下面是我的code：

我的观点：

 ＆LT;形式为GT;
  ＆LT;输入类型=数字级=NG-模式=marker.markerLat所需=＆GT;
  ＆LT;输入类型=数字级=NG-模式=marker.markerLng所需=＆GT;
  ＆LT;按钮类=按钮NG点击=addMarker（标记）＆gt;添加＆LT; /按钮＆GT;
＆LT; /表及GT;
＆LT;谷歌地图中心=map.center变焦=map.zoom＆GT;
 ＆LT;标记COORDS =marker.coords选项=marker.optionsidkey =marker.id＆GT;
 ＆LT; /标记＆GT;
＆LT; /谷歌地图＆GT;
 

我的控制器：

  //默认位置
        $ scope.map = {
          中央： {
            纬度：32.7833，
            经度：-79.9333
          }，
          变焦：11
        }
        $ scope.options = {滚轮：真正};        $ scope.markers = [];        $ scope.addMarker =功能（标记）{            $ scope.markers.push（{
                纬度：parseFloat（$ scope.markerLat）
                经度：parseFloat（$ scope.markerLng）
            }）;            的console.log（'设备补充：'+ $ scope.markers）;
            $ scope.markerLat =;
            $ scope.markerLng =;
        };        $ scope.marker = {
          ID：0，
          COORDS：{
            纬度：32.7833，
            经度：-79.9333
          }
          }
 

解决方案

我会建议你创建一个自定义的角度指令来地图。

但无论如何，角度是不够的，得到你想要的工作。你必须创建 google.maps 的对象。并设置地图属性你的标记到地图你已经创建。

下面是一个小例子：

  .directive（'地图'，函数（）{
返回{
  模板：'＆LT; D​​IV＆GT;＆LT; / DIV＆GT;，
  限制：EA，
  更换：真实，
  链接：功能（范围，元素）{    scope.markers = [];    scope.map =新google.maps.Map（元素[0]，{
      中心：新google.maps.LatLng（32.7833，-79.9333），
      变焦：11
    }）;    scope.addMarker =功能（LAT，LNT）{
      VAR的标记=新google.maps.Marker（{
        图：scope.map，
        位置：新google.maps.LatLng（纬度，经度）
      }）;      scope.markers.push（标记）;
    };  }
}）;
 

所以，你只需要调用一个经纬度和 LNG <在 addMarker 功能/ code>参数。使用角事件控制器和指令之间的通信。有关方法的详细信息这里

I am trying to have an input field that when submitted adds a marker to my Google Map. Right now when I submit the field it is creating the object but the marker is not being displayed. Right now I am able to get a location to show up if it is hard coded in but not when I add a new one. (I know that the view right now is only for the hard coded one, I have that so the current code is working)

Here is my code:

My View:

<form>
  <input type="number" class="" ng-model="marker.markerLat" required="">
  <input type="number" class="" ng-model="marker.markerLng" required="">
  <button class="button" ng-click="addMarker(marker)">Add</button>
</form>
<google-map center="map.center" zoom="map.zoom">
 <marker coords="marker.coords" options="marker.options" idkey="marker.id" >
 </marker>
</google-map>

My Controller:

//Default location
        $scope.map = {
          center: {
            latitude: 32.7833,
            longitude: -79.9333
          },
          zoom: 11
        }
        $scope.options = {scrollwheel: true};

        $scope.markers = [];

        $scope.addMarker = function (marker) {

            $scope.markers.push({
                latitude: parseFloat($scope.markerLat),
                longitude: parseFloat($scope.markerLng)
            });

            console.log('Maker add: ' + $scope.markers);
            $scope.markerLat ="";
            $scope.markerLng ="";
        };

        $scope.marker = {
          id:0,
          coords: {
            latitude: 32.7833,
            longitude: -79.9333
          }
          }

解决方案

I would advice you to create a custom angular directive for your map.

But anyway, angular is not enough to get what you want working. You have to create google.maps objects. And set the map property of your marker to the map you have created.

Here is a little example :

.directive('map', function () {
return {
  template: '<div></div>',
  restrict: 'EA',
  replace: true,
  link: function (scope, element) {

    scope.markers = [];

    scope.map = new google.maps.Map(element[0], {
      center: new google.maps.LatLng(32.7833, -79.9333),
      zoom: 11
    });

    scope.addMarker = function (lat, lnt) {
      var marker = new google.maps.Marker({
        map: scope.map,
        position:  new google.maps.LatLng(lat, lng)
      });

      scope.markers.push(marker);
    };

  }
});

So you simply have to call the addMarker function with a lat and lng parameter. Use angular events to communicate between your controller and directive. More info about the methods here

这篇关于如何添加标记到谷歌地图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！