在我点击的 Google 地图上添加标记
Add Marker on Google map wherever I click
我想实现与此类似的东西 http://jsfiddle.net/sya8gn0w/1/。
现在的问题是我有自己的自定义指令来显示地图。我想要子控制器中的一个功能,它将在单击某些按钮时实现上述功能。
例如。位置标记功能仅在我单击某个按钮时触发。
当前代码-
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 的 'click:' 部分中的功能移动到 ChildCtrl 控制器中的功能。可能吗 ?
否则建议我使用不同的方法来实现这一目标。
不知道我的回答对你有没有帮助。
最近在做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 父控制器的对象。
您可以在单独的控制器中声明添加标记的函数
然后利用 $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);
}
});
});
我使用了不同但更好的方法来达到预期的结果。
在 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);
}
};
我想实现与此类似的东西 http://jsfiddle.net/sya8gn0w/1/。
现在的问题是我有自己的自定义指令来显示地图。我想要子控制器中的一个功能,它将在单击某些按钮时实现上述功能。
例如。位置标记功能仅在我单击某个按钮时触发。
当前代码-
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 的 'click:' 部分中的功能移动到 ChildCtrl 控制器中的功能。可能吗 ? 否则建议我使用不同的方法来实现这一目标。
不知道我的回答对你有没有帮助。 最近在做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 父控制器的对象。
您可以在单独的控制器中声明添加标记的函数
然后利用 $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);
}
});
});
我使用了不同但更好的方法来达到预期的结果。 在 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);
}
};