我已经使用了UI Google地图。标记事件不工作我正在使用这个http://angular-ui.github.io/angular-google-maps/#!/api/标记观点:
<ui-gmap-markers models="mapResult" fit="true" idkey="mapResult.id" coords="'form_geo'" click="'onclick'" events="mapResult.events" >
<ui-gmap-windows show="show" closeClick="closeClick()">
<div ng-controller="MapsDemoCtrl" ng-non-bindable>
<span style="color:#000;font-weight:bold;">
Formname : <a href='#/formspostview/{{id}}' style="color:#000;">
{{form_name}}
</a><br>
Username : {{user_name}}<br>
Date : {{createdAt | date: "MM/dd/yyyy H:mm"}}<br>
</span>
</div>
</ui-gmap-windows>
</ui-gmap-markers>
控制器:
$scope.onclick = function () {
// check if there is query in url
// and fire search in case its value is not empty
console.log("hai");
};
你能帮我吗?如何使用标记事件
下面的例子演示了如何通过ui-gmap-markers
指令将click
事件处理程序附加到标记:
$scope.map.markersEvents = {
click: function (marker, eventName, model, args) {
//...
}
};
,
<ui-gmap-markers models="map.markers" coords="'coords'" icon="'icon'" options="'options'" events="map.markersEvents">
</ui-gmap-markers>
工作示例
angular.module('appMaps', ['uiGmapgoogle-maps'])
.controller('mainCtrl', function ($scope, $log) {
$scope.map = {
center: { latitude: 40.1451, longitude: -99.6680 },
zoom: 4,
markers: [
{
id: 0,
showWindow: false,
city: 'New York',
coords: {
latitude: 40.710355,
longitude: -74.001839
}
},
{
id: 1,
showWindow: false,
city: 'San Francisco',
coords: {
latitude: 37.775404,
longitude: -122.437600
}
}]
};
$scope.options = { };
$scope.map.markersEvents = {
click: function (marker, eventName, model, args) {
logMarkerInfo(marker);
}
};
var logMarkerInfo = function(marker){
var pos = marker.getPosition();
document.getElementById('output').innerHTML += "Marker (" + pos.lat() + "," + pos.lng() + ")";
};
});
html, body, #map_canvas {
height: 100%;
width: 100%;
margin: 0px;
}
#map_canvas {
position: relative;
}
.angular-google-map-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
<html xmlns:ng="http://angularjs.org/" ng-app="appMaps">
<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
<div id="map_canvas" ng-controller="mainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" options="options">
<ui-gmap-markers models="map.markers" coords="'coords'" icon="'icon'" options="'options'" events="map.markersEvents">
<ui-gmap-windows show="map.showWindow" closeclick="'closeClick'" >
<div ng-non-bindable>{{ city }}</div>
</ui-gmap-windows>
</ui-gmap-markers>
</ui-gmap-google-map>
</div>
<div id="output"/>
你也可以这样做:(需要在控制器上注入$interval)
var ctrl = this;
var count = 1;
var clock;
ctrl.map;
var lat = -23.56;
var long = -46.65;
// Start Hold To Mark Controller
var startCount = function(event){
count = 1;
if ( angular.isDefined(clock) ) return;
clock = $interval(function() {
if(count > 0){
count = count - 1;
} else{
addMarker(event.latLng);
stopCount();
}
}, 500);
};
var stopCount = function(){
if (angular.isDefined(clock)) {
$interval.cancel(clock);
clock = undefined;
}
};
$scope.$on('$destroy', function() {
stopCount();
});
// End Hold To Mark Controller
// Start GoogleMaps Map Controller
function initMap() {
if(lat == null || long == null){
var center = { lat: -23.56, lng: -46.65 };
} else{
var center = { lat: lat, lng: long };
}
ctrl.map = new google.maps.Map(document.getElementById('map'), {
disableDefaultUI: true,
zoom: 12,
center: center
});
google.maps.event.addListener(ctrl.map, 'mousedown', function(event) {
startCount(event);
});
google.maps.event.addListener(ctrl.map, 'mouseup', function(event) {
stopCount();
});
google.maps.event.addListener(ctrl.map, 'dragstart', function(event) {
stopCount();
});
};
function addMarker(location) {
var marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
draggable: true,
position: location,
map: ctrl.map
});
markers.push(marker);
};
initMap();
// End GoogleMaps Map Controller
它会在1秒后留下一个标记,如果你在此之前移开手指或移动手指,该标记将不会创建