7

我正在尝试使用 ui.Map ( http://angular-ui.github.io/ui-map/ )在 Angularjs 中实现 Google 地图

我已经非常密切地关注了这个例子并且地图加载了，我可以在地图中心创建一个标记，'map-tilesloaded' 事件工作正常。

我的问题是在用户点击的地方添加一个标记。click 函数正在接收一个空的 $params 参数。在我的控制器中：

$scope.newMapOptions = {
    center : new google.maps.LatLng($scope.position.lat, $scope.position.lng),
    zoom : 18,
    mapTypeId : google.maps.MapTypeId.ROADMAP
};
$scope.getLocation = function() {
    if (navigator.geolocation) {
        return navigator.geolocation.getCurrentPosition(setPosition);
    }
};

$scope.addMarker = function($event, $params) {
    $scope.newTingMarker = new google.maps.Marker({
        map : $scope.myNewTingMap,
        position : $params[0].latLng
    });
};

$scope.initMap = function() {
    if (!$scope.mapLoaded)
        $scope.getLocation();
    $scope.mapLoaded = true;
};

function setPosition(pos) {
    $scope.position = {
        lat : pos.coords.latitude,
        lng : pos.coords.longitude
    };
    $scope.meMarker = new google.maps.Marker({
        map : $scope.myNewTingMap,
        position : new google.maps.LatLng($scope.position.lat, $scope.position.lng)
    });

    $scope.myNewTingMap.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
    $scope.$apply();
}

的HTML：

<div ui-map-info-window="myInfoWindow">
    <b>Current location</b>
</div>
<div  ui-map-marker="meMarker" ></div>
<div  ui-map-marker="newTingMarker" ui-event="{'map-click': 'openMarkerInfo(newTingMarker)'}"></div>
<section id="newTingMap" >
    <div ui-map="myNewTingMap" ui-options="newMapOptions" class="map-canvas"
    ui-event="{'map-tilesloaded': 'initMap()', 'map-click': 'addMarker($event, $params)' }"></div>
</section>

$scope.addMarker 应该接收 $event 和 $params 其中 $params[0] 具有 latlng 对象。目前它是一个空数组：[]

我正在使用 angular 1.1.5，但我尝试使用与 ui.Map 示例相同的方法，但没有任何效果。

我还应该注意，这是在一个视图中，但是将它放在主控制器的视图之外没有任何区别。

如果我尝试遵循从 ui-map 指令运行的代码，我可以看到 latlng 对象确实在事件中启动：

ui-map.js：

 angular.forEach(eventsStr.split(' '), function (eventName) {
  //Prefix all googlemap events with 'map-', so eg 'click' 
  //for the googlemap doesn't interfere with a normal 'click' event
  google.maps.event.addListener(googleObject, eventName, function (event) {
    element.triggerHandler('map-' + eventName, event);
    //We create an $apply if it isn't happening. we need better support for this
    //We don't want to use timeout because tons of these events fire at once,
    //and we only need one $apply
    if (!scope.$$phase){ scope.$apply();}
  });
});

element.triggerHandler('map-' + eventName, event); ...在“事件”中有 latlng 对象，但之后似乎迷路了

4

1 回答 1

3

不确定您的问题是什么，我拿走了您的代码并创建了一个可以正常工作的小提琴（您应该做的事情）。

当您单击该日志时，我做了一个控制台日志$params.

最需要注意的是您的代码一开始会崩溃，因为您$scope.position.lat 在设置之前引用了它。我将其更新为默认为 RVA。

在此处输入图像描述,

您确实需要更优雅地处理此案。

function MapCtrl($scope, watchArray) {
    var center;
    if ($scope.position) {
        center = new google.maps.LatLng($scope.position.lat, $scope.position.lng);
    } 
    else {
        center = new google.maps.LatLng(37.5410, 77.4329); //if null use rva
    }
    $scope.newMapOptions = {
        center: center,
        zoom: 18,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    ...
}

控制台日志：

[Ps]
v 0: Ps
    > la: Q
    > latLng: O
    > pixel: Q
    > __proto__: Ps
    length: 1
    > __proto__: Array[0]
于 2014-04-03T14:36:03.257 回答