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

问题描述

我正在尝试使用一个输入字段，在提交时向我的 Google 地图添加一个标记.现在，当我提交该字段时，它正在创建对象，但未显示标记.现在，如果它是硬编码的，我可以得到一个显示位置，但当我添加一个新的位置时则不能.(我知道现在的视图仅适用于硬编码的视图，我拥有它，因此当前代码正在运行)

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)

这是我的代码:

我的观点:

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

我的控制器:

//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.

但无论如何，angular 还不足以让你想要的工作.您必须创建 google.maps 对象.并将您的 marker 的 map 属性 设置为您创建的 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.

这是一个小例子:

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

  }
});

因此，您只需使用 lat 和 lng 参数调用 addMarker 函数即可.使用角度事件在控制器和指令之间进行通信.有关方法的更多信息此处

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

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