Javascript 谷歌地图标记位置不是角度指令
我在AngularJS(MVC5)应用程序中使用谷歌地图。我使用Javascript 谷歌地图标记位置不是角度指令,javascript,jquery,angularjs,google-maps,google-maps-api-3,Javascript,Jquery,Angularjs,Google Maps,Google Maps Api 3,我在AngularJS(MVC5)应用程序中使用谷歌地图。我使用 `googlemap` directive in my `app.js`. app.js myApp.directive('googlemap', function ($compile) { return { controller: function ($scope) { var map; this.registerMap = function (myMap) {
`googlemap` directive in my `app.js`.
app.js
myApp.directive('googlemap', function ($compile) {
return {
controller: function ($scope) {
var map;
this.registerMap = function (myMap) {
var center = myMap.getCenter(),
latitude = center.lat(),
longitude = center.lng();
//zoom = center.zoom();
map = myMap;
$scope.latitude = latitude;
$scope.longitude = longitude;
$scope.zoom = map.getZoom();
};
$scope.$watch('latitude + longitude', function (newValue, oldValue) {
if (newValue !== oldValue) {
var center = map.getCenter(),
latitude = center.lat(),
longitude = center.lng();
if ($scope.latitude !== latitude || $scope.longitude !== longitude)
map.setCenter(new google.maps.LatLng($scope.latitude, $scope.longitude));
}
});
},
link: function (scope, elem, attrs, ctrl) {
var mapOptions,
latitude = parseFloat(attrs.latitude , 10),
longitude = parseFloat(attrs.longitude , 10),
//controlTemplate,
//controlElem,
map;
// parsing latLong or setting default location
latitude = latitude && parseFloat(latitude, 10) || 43.074688;
longitude = longitude && parseFloat(longitude, 10) || -89.384294;
mapOptions = {
zoom: 8,
disableDefaultUI: true,
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
center: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(elem[0], mapOptions);
var var_location = new google.maps.LatLng(latitude, longitude);
var var_marker = new google.maps.Marker({
position: var_location,
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
title: "Venice"
});
function toggleBounce() {
if (var_marker.getAnimation() != null) {
var_marker.setAnimation(null);
} else {
var_marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
google.maps.event.addListener(var_marker, 'click', toggleBounce);
google.maps.event.addListener(var_marker, 'dragend', function (evt) {
//document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
latitude = evt.latLng.lat();
console.log(' latitude = evt.latLng.lat(); ' + latitude)
scope.latitude = evt.latLng.lat();
scope.longitude = evt.latLng.lng();
if (!scope.$$phase) scope.$apply();
});
ctrl.registerMap(map);
function centerChangedCallback(scope, map) {
return function () {
var center = map.getCenter();
scope.latitude = center.lat();
scope.longitude = center.lng();
scope.zoom = map.getZoom();
if (!scope.$$phase) scope.$apply();
};
}
google.maps.event.addListener(map, 'center_changed', centerChangedCallback(scope, map));
}
};});
但是attrs.latitude,attrs.lnglongitude
总是显示undefined
我不知道如何在
attrs
变量中设置值。您不在attrs中设置值,而是从元素属性中读取它们。看看指令范围可能会有帮助,下面是一篇好文章,希望能有所帮助:(。那么我如何从db中设置标记值。你的意思是我需要为google map实现另一种方法。
<div class="col-sm-10" style="height:400px;" googlemap latitude="latitude" longitude="longitude"></div>
link: function (scope, elem, attrs, ctrl) {