angularjs
我正在尝试使用ui.Map（http://angular-ui.github.io/ui-map/）在Angularjs中实现Google地图。
我已经非常仔细地跟踪了这个例子，并加载了地图，我可以在地图中心创建一个标记，并且'map-tilesloaded'事件工作正常。
我的问题是在用户点击的位置添加一个标记。 点击函数正在接收一个空的$ 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对象。 目前它是一个空阵列：[]
我使用的是角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对象，但在此之后似乎会丢失
不知道你的问题是什么，我把你的代码和创建一个小提琴的工作正常（你应该做的事情）。
当你点击记录$params.时，我做了一个控制台日志$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
}
...
}
CONSOLE.LOG：
[Ps]
v 0: Ps
> la: Q
> latLng: O
> pixel: Q
> __proto__: Ps
length: 1
> __proto__: Array[0]
上一篇: angularjs