我想为 Angular Google Maps 中的标记点击事件维护一个单独的模板。在此模板上,我想在用户单击标记时显示标记信息。标记在test.html
我的主要模板是
<ui-gmap-google-map center="map.center" pan="false" zoom="map.zoom" draggable="true" options="options">
<ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" events="markerEvents" icon="'icon'">
<ui-gmap-windows show="'show'" options="windowOptions" closeClick="closeWindow" templateUrl="'test.html'" templateParameter="">
</ui-gmap-windows>
</ui-gmap-markers>
</ui-gmap-google-map>
控制器是
uiGmapGoogleMapApi.then(function(maps){
$scope.markers =[];
$scope.map = {
center: {
latitude: 27.2101,
longitude: 77.9728
},
zoom: 5,
bounds : {},
control : {}
};
});
uiGmapIsReady.promise().then(function (instances) {
var map = instances[0].map;
var persons_location_dict={
"session_key" : "sjaskajds343232",
"id": 1
};
$http.post(some_user, persons_location_dict)
.success(function (response,status) {
var count =1;
$scope.markers = response.result.employees_info;
$scope.markers.forEach(function(maker){
maker.id = count++;
maker.coords = {};
maker.coords.latitude = maker.latitude;
maker.coords.longitude = maker.longitude;
maker.show = false;
});
$scope.employees_last_location = response.result.employees_info;
console.log('Test');
})
.error(function(response, status){
console.log('Error');
});
$scope.markerEvents = {
mouseover: function (marker, eventName, model, args) {
},
mouseout: function (marker, eventName, model, args) {
},
drag: function (marker, eventName, model, args) {
},
dragend: function(marker) {
},
click: function (marker, eventName, model, args){
$scope.windowOptions.show = true;
$scope.windowOptions.visible = true;
$scope.first_name = marker.model.first_name;
$scope.$apply();
}
};// end of markerEvents
});
$scope.windowOptions = {
show: false
};
$scope.closeClick = function () {
$scope.windowOptions.show = false;
};