AngularJS Google 地图:Add/update 标记并在点击时更新中心点
AngularJS Google Maps: Add/update marker and update centerpoint on click
问题: 我无法在 Google 地图上显示标记。我希望用户点击,显示标记,地图以标记为中心。
损坏的地方: 单击时没有显示标记。地图下面的lat/longdiv也不显示
有效方法: 地图显示,并正确地以点击位置为中心。变量 mapClicked
更新为 true
.
自诊断: 我认为问题源于 vm.map
的范围问题,或者 vm.map
的更改未在 AngularJS生命周期。
第三方包:我正在使用Angular Google Maps.
我的代码片段:
HTML:
<ui-gmap-google-map id="listingMap"
center='listingCtrl.map.center'
zoom='listingCtrl.map.zoom'
events='listingCtrl.map.events'
style="height: 250px; width: 100%">
<ui-gmap-marker ng-if="listingCtrl.mapClicked"
coords="listingCtrl.map.marker"
idKey=" 'userClickLocation' ">
</ui-gmap-marker>
</ui-gmap-google-map>
<div class="col-xs-12" ng-if="listingCtrl.map.marker.latitude">
<span style="font-weight: bold">Latitude: </span>{{ listingCtrl.map.marker.latitude }}
<span style="font-weight: bold">Longitude: </span>{{ listingCtrl.map.marker.longitude }}
</div>
控制器:
(function () {
'use strict';
angular.
module('boat').
controller('NewListingController', NewListingController);
function NewListingController() {
var vm = this;
vm.activePage = 1;
vm.map = getMap();
vm.mapClicked = false;
////////////////////
function getMap() {
var map = {
center: {latitude: 20.9, longitude: -78.1},
zoom: 5,
marker: {},
events: {
click: function (map, eventName, originalEventArgs) {
var e = originalEventArgs[0];
map.marker = {latitude: e.latLng.lat(), longitude: e.latLng.lng()};
map.panTo(new google.maps.LatLng(map.marker.latitude, map.marker.longitude));
vm.mapClicked = true;
}
}
};
return map;
}
}
})();
回顾: 期望的行为是用户单击地图以添加标记。坐标应呈现在地图下方。地图应以点击为中心。额外的点击更新单个标记和坐标。
你能帮忙吗?
问题是 click
事件处理程序上的 map
参数与 getMap
函数中名为 map
的现有局部变量冲突。
只需将 click
事件处理程序参数更改为 mapObject
并调用 panTo
即可解决问题。
// ...
click: function(mapObject, eventName, originalEventArgs) {
/*^^^^^*/
var e = originalEventArgs[0];
map.marker = {
latitude: e.latLng.lat(),
longitude: e.latLng.lng()
};
mapObject.panTo(new google.maps.LatLng(map.marker.latitude, map.marker.longitude));
/*^^^^^*/
vm.mapClicked = true;
}
// ...
JS Fiddle 已修复。
或者看下面的代码片段。
angular.module('boat', ['nemLogging', 'uiGmapgoogle-maps']);
(function() {
'use strict';
angular.
module('boat').
controller('NewListingController', NewListingController);
function NewListingController() {
var vm = this;
vm.activePage = 1;
vm.map = getMap();
vm.mapClicked = false;
////////////////////
function getMap() {
var map = {
center: {
latitude: 20.9,
longitude: -78.1
},
zoom: 5,
marker: {},
events: {
click: function(mapObject, eventName, originalEventArgs) {
var e = originalEventArgs[0];
map.marker = {
latitude: e.latLng.lat(),
longitude: e.latLng.lng()
};
mapObject.panTo(new google.maps.LatLng(map.marker.latitude, map.marker.longitude));
vm.mapClicked = true;
}
}
};
return map;
}
}
})();
.angular-google-map-container {
height: 150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdn.rawgit.com/nmccready/angular-simple-logger/master/dist/browser.js"></script>
<script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.2.1/angular-google-maps.min.js"></script>
<div ng-app="boat">
<div ng-controller="NewListingController as listingCtrl">
<!-- CODE IN QUESTION BEGINS -->
<ui-gmap-google-map id="listingMap" center='listingCtrl.map.center' zoom='listingCtrl.map.zoom' events='listingCtrl.map.events' style="height: 250px; width: 100%">
<ui-gmap-marker ng-if="listingCtrl.mapClicked" coords="listingCtrl.map.marker" idKey=" 'userClickLocation' "></ui-gmap-marker>
</ui-gmap-google-map>
<div class="col-xs-12" ng-if="listingCtrl.map.marker.latitude"> <span style="font-weight: bold">Latitude: </span>{{ listingCtrl.map.marker.latitude }} <span style="font-weight: bold">Longitude: </span>{{ listingCtrl.map.marker.longitude }}</div>
<!-- CODE IN QUESTION ENDS -->
</div>
</div>
问题: 我无法在 Google 地图上显示标记。我希望用户点击,显示标记,地图以标记为中心。
损坏的地方: 单击时没有显示标记。地图下面的lat/longdiv也不显示
有效方法: 地图显示,并正确地以点击位置为中心。变量 mapClicked
更新为 true
.
自诊断: 我认为问题源于 vm.map
的范围问题,或者 vm.map
的更改未在 AngularJS生命周期。
第三方包:我正在使用Angular Google Maps.
我的代码片段:
HTML:
<ui-gmap-google-map id="listingMap"
center='listingCtrl.map.center'
zoom='listingCtrl.map.zoom'
events='listingCtrl.map.events'
style="height: 250px; width: 100%">
<ui-gmap-marker ng-if="listingCtrl.mapClicked"
coords="listingCtrl.map.marker"
idKey=" 'userClickLocation' ">
</ui-gmap-marker>
</ui-gmap-google-map>
<div class="col-xs-12" ng-if="listingCtrl.map.marker.latitude">
<span style="font-weight: bold">Latitude: </span>{{ listingCtrl.map.marker.latitude }}
<span style="font-weight: bold">Longitude: </span>{{ listingCtrl.map.marker.longitude }}
</div>
控制器:
(function () {
'use strict';
angular.
module('boat').
controller('NewListingController', NewListingController);
function NewListingController() {
var vm = this;
vm.activePage = 1;
vm.map = getMap();
vm.mapClicked = false;
////////////////////
function getMap() {
var map = {
center: {latitude: 20.9, longitude: -78.1},
zoom: 5,
marker: {},
events: {
click: function (map, eventName, originalEventArgs) {
var e = originalEventArgs[0];
map.marker = {latitude: e.latLng.lat(), longitude: e.latLng.lng()};
map.panTo(new google.maps.LatLng(map.marker.latitude, map.marker.longitude));
vm.mapClicked = true;
}
}
};
return map;
}
}
})();
回顾: 期望的行为是用户单击地图以添加标记。坐标应呈现在地图下方。地图应以点击为中心。额外的点击更新单个标记和坐标。
你能帮忙吗?
问题是 click
事件处理程序上的 map
参数与 getMap
函数中名为 map
的现有局部变量冲突。
只需将 click
事件处理程序参数更改为 mapObject
并调用 panTo
即可解决问题。
// ...
click: function(mapObject, eventName, originalEventArgs) {
/*^^^^^*/
var e = originalEventArgs[0];
map.marker = {
latitude: e.latLng.lat(),
longitude: e.latLng.lng()
};
mapObject.panTo(new google.maps.LatLng(map.marker.latitude, map.marker.longitude));
/*^^^^^*/
vm.mapClicked = true;
}
// ...
JS Fiddle 已修复。
或者看下面的代码片段。
angular.module('boat', ['nemLogging', 'uiGmapgoogle-maps']);
(function() {
'use strict';
angular.
module('boat').
controller('NewListingController', NewListingController);
function NewListingController() {
var vm = this;
vm.activePage = 1;
vm.map = getMap();
vm.mapClicked = false;
////////////////////
function getMap() {
var map = {
center: {
latitude: 20.9,
longitude: -78.1
},
zoom: 5,
marker: {},
events: {
click: function(mapObject, eventName, originalEventArgs) {
var e = originalEventArgs[0];
map.marker = {
latitude: e.latLng.lat(),
longitude: e.latLng.lng()
};
mapObject.panTo(new google.maps.LatLng(map.marker.latitude, map.marker.longitude));
vm.mapClicked = true;
}
}
};
return map;
}
}
})();
.angular-google-map-container {
height: 150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdn.rawgit.com/nmccready/angular-simple-logger/master/dist/browser.js"></script>
<script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.2.1/angular-google-maps.min.js"></script>
<div ng-app="boat">
<div ng-controller="NewListingController as listingCtrl">
<!-- CODE IN QUESTION BEGINS -->
<ui-gmap-google-map id="listingMap" center='listingCtrl.map.center' zoom='listingCtrl.map.zoom' events='listingCtrl.map.events' style="height: 250px; width: 100%">
<ui-gmap-marker ng-if="listingCtrl.mapClicked" coords="listingCtrl.map.marker" idKey=" 'userClickLocation' "></ui-gmap-marker>
</ui-gmap-google-map>
<div class="col-xs-12" ng-if="listingCtrl.map.marker.latitude"> <span style="font-weight: bold">Latitude: </span>{{ listingCtrl.map.marker.latitude }} <span style="font-weight: bold">Longitude: </span>{{ listingCtrl.map.marker.longitude }}</div>
<!-- CODE IN QUESTION ENDS -->
</div>
</div>