在地圖上添加標記：AngularJS

Question

我在處理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
        });

此代碼不會產生任何結果。 哪里錯了？

Answer 1

這是一種工作解決方案 ，單擊時會出現標記，而這個標記已經可見-使用您的代碼（幾乎-我沒有使用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
    });

});

請讓我知道這對你有沒有用。