在地图上添加标记:AngularJS

Adding marker on map: AngularJS

本文关键字：AngularJS 加标记 添加 地图      更新时间：2023-11-26

我很难处理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
        });

此代码不会产生任何结果。哪里出了问题？

这是一个在点击时显示标记的工作解决方案，而这个已经显示标记的解决方案-使用您的代码（好吧，几乎-我没有使用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
    });
});

让我知道它是否适合你。

相关文章：