在Google地圖上單擊任意位置時添加標記

我想實現類似於http://jsfiddle.net/sya8gn0w/1/的操作。在Google地圖上單擊任意位置時添加標記

現在的問題是我有我自己的自定義指令來顯示地圖。我想要一個子控制器中的功能，它將在點擊某個按鈕時實現上述功能。

例如。只有當我點擊某個按鈕時，地點標記功能纔會觸發。

本次代碼 -

function ParentCtrl($scope){ 
    var mainCtrl = this; 

    angular.extend(mainCtrl , { 
     map: { 
      center: { 
       latitude: 18.5, 
       longitude: 73.85 
      }, 
      zoom: 13, 
      markers: [], 
      events: { 
       click: function (map, eventName, originalEventArgs) { 
        var e = originalEventArgs[0]; 
        var lat = e.latLng.lat(), lon = e.latLng.lng(); 
        var marker = { 
         id: Date.now(), 
         coords: { 
          latitude: lat, 
          longitude: lon 
         } 
        }; 
        mainCtrl .map.markers.pop(); 
        mainCtrl .map.markers.push(marker); 
        console.log(mainCtrl .map.markers); 
        console.log("latitude : "+lat+" longitude : "+lon); 
        $scope.$apply(); 
       } 
      } 
     } 
    }); 
};

我想移動目前在功能「點擊：」 angular.extend的部分功能在ChildCtrl控制器呈現。可能嗎？另外建議我採取不同的方法來實現這一點。

來源

2016-02-29 Jaspreet Singh

我用不同的，但更好的方法來實現期望的結果。在fiddle上找到此解決方案。希望這對其他人也有幫助。

function dragMarkerService(resolveAddressService){ 
    this.placeMarker = function(location, idValue, map){ 
     var myMarker = new google.maps.Marker({ 
      position: new google.maps.LatLng(location.latitude, location.longitude), 
      draggable: true 
     }); 

     google.maps.event.addListener(myMarker, 'dragend', function (evt) { 
      location.latitude = evt.latLng.lat(); 
      location.longitude = evt.latLng.lng(); 

      resolveAddressService.resolveAddress(location, idValue) 
     }); 
     google.maps.event.addListener(myMarker, 'dragstart', function (evt) { 
      angular.element(idValue).val() = 'Currently dragging marker...'; 
     }); 

     map.setCenter(myMarker.position); 
     myMarker.setMap(map); 

    } 
};

來源

2016-03-03 06:30:08

我不知道我的答案是否會幫助你。最近我在GoogleMap上工作，我想分享我的知識。

angular.extend(scope, { 
    map: { 
    show: true, 
    control: {}, 
    version: 'uknown', 
    center: { 
     latitude: 0, 
     longitude: 0 
    }, 
    options: { 
     streetViewControl: false, 
     panControl: false, 
     maxZoom: 10, 
     minZoom: 1 
    }, 
    zoom: 2, 
    dragging: false, 
    bounds: {}, 
    markers: scope.markers, 
    doClusterMarkers: true, 
    currentClusterType: 'standard', 
    clusterTypes: clusterTypes, 
    selectedClusterTypes: selectedClusterTypes, 
    clusterOptions: selectedClusterTypes['standard'], 
    events: { 
     tilesloaded: function(map, eventName, originalEventArgs) {}, 
     click: function(mapModel, eventName, originalEventArgs) {}, 
     dragend: function() {} 
    }, 
    toggleColor: function(color) { 
     if (color === 'red') { 
     return '#6060FB'; 
     } else { 
     return 'red'; 
     } 
    } 
    }

這裏聲明markers: scope.markers將有助於創造新的標記或刪除舊的標記。

在「ChildCtrl」你寫一個函數來更新scope.markers父控制器的對象。

來源

2016-02-29 09:32:33 Hemakumar

你可以聲明函數在一個單獨的控制器添加標記，然後利用$controller service到控制器注入到另一個控制器：

angular.module('main', ['uiGmapgoogle-maps']) 
.controller('MapCtrl', function ($scope,$controller) { 

    $controller('MarkerCtrl', {$scope: $scope}); 

    angular.extend($scope, { 
     map: { 
      center: { 
       latitude: 42.3349940452867, 
       longitude:-71.0353168884369 
      }, 
      zoom: 11, 
      markers: [], 
      events: { 
      click: function (map, eventName, originalEventArgs) { 
       var e = originalEventArgs[0]; 
       $scope.addMarker(e.latLng); 
       $scope.$apply(); 
      } 
     } 
     } 
    }); 
}) 
.controller('MarkerCtrl', function($scope) { 

    angular.extend($scope, { 

     addMarker: function(latLng) { 
      var marker = { 
        id: Date.now(), 
        coords: { 
         latitude: latLng.lat(), 
         longitude: latLng.lng() 
        } 
      }; 
      $scope.map.markers.push(marker); 
     } 
    });  
});

Plunker

來源

2016-02-29 12:07:06

在Google地圖上單擊任意位置時添加標記

回答

相關問題