在地图上添加标记:AngularJS
Adding marker on map: AngularJS
我很难适应 AngularJS 及其设置地图和标记的方式。
现在我有以下代码:
<map data-ng-model="mymapdetail" zoom="11"
center="{{item.coordinates}}" style="heigth:375px">
<div data-ng-model="mymarker"></div>
</map>
这正确显示了居中的地图。然后我尝试以这种方式添加标记。
$scope.mymarker = new google.maps.Marker({
map: $scope.mymapdetail,
position: new google.maps.LatLng(item.coordinates),
title: woa.title
});
此代码不产生任何结果。哪里错了?
这里的 working solution with marker appearing on click and this one 标记已经可见 - 使用您的代码(好吧几乎 - 我没有使用 map 指令),但您应该能够通过很少的更改使其适应您的代码。
在您的情况下它不起作用的主要原因可能是使用 new google.maps.LatLng(item.coordinates)
代码如下:
//Angular App Module and Controller
angular.module('mapsApp', [])
.controller('MapCtrl', function ($scope) {
var item = {
coordinates: [40.6423926, -97.3981926]
};
var woa = {
city: 'This is my marker. There are many like it but this one is mine.'
};
//set up map
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(40.0000, -98.0000),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
$scope.mymapdetail = new google.maps.Map(document.getElementById('map'), mapOptions);
//add marker
$scope.mymarker = new google.maps.Marker({
map: $scope.mymapdetail,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(item.coordinates[0], item.coordinates[1]),
title: woa.city
});
});
让我知道它是否适合您。
我很难适应 AngularJS 及其设置地图和标记的方式。
现在我有以下代码:
<map data-ng-model="mymapdetail" zoom="11"
center="{{item.coordinates}}" style="heigth:375px">
<div data-ng-model="mymarker"></div>
</map>
这正确显示了居中的地图。然后我尝试以这种方式添加标记。
$scope.mymarker = new google.maps.Marker({
map: $scope.mymapdetail,
position: new google.maps.LatLng(item.coordinates),
title: woa.title
});
此代码不产生任何结果。哪里错了?
这里的 working solution with marker appearing on click and this one 标记已经可见 - 使用您的代码(好吧几乎 - 我没有使用 map 指令),但您应该能够通过很少的更改使其适应您的代码。
在您的情况下它不起作用的主要原因可能是使用 new google.maps.LatLng(item.coordinates)
代码如下:
//Angular App Module and Controller
angular.module('mapsApp', [])
.controller('MapCtrl', function ($scope) {
var item = {
coordinates: [40.6423926, -97.3981926]
};
var woa = {
city: 'This is my marker. There are many like it but this one is mine.'
};
//set up map
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(40.0000, -98.0000),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
$scope.mymapdetail = new google.maps.Map(document.getElementById('map'), mapOptions);
//add marker
$scope.mymarker = new google.maps.Marker({
map: $scope.mymapdetail,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(item.coordinates[0], item.coordinates[1]),
title: woa.city
});
});
让我知道它是否适合您。