Javascript 标记不显示在地图angularjs上

Javascript 标记不显示在地图angularjs上,javascript,angularjs,google-maps,google-maps-api-3,Javascript,Angularjs,Google Maps,Google Maps Api 3,我正在使用角度贴图创建一个带有标记列表的贴图。 我在显示标记时遇到问题。不过我没有错 这是我的密码: 控制器 var app = angular.module('mapController', []); app.service('Map', function($q) { this.init = function() { var options = { center: new google.maps.LatLng(45.7154289, 4.9317724),

我正在使用角度贴图创建一个带有标记列表的贴图。 我在显示标记时遇到问题。不过我没有错

这是我的密码:

控制器

var app = angular.module('mapController', []);

app.service('Map', function($q) {

this.init = function() {
    var options = {
        center: new google.maps.LatLng(45.7154289, 4.9317724),
        zoom: 14,
        disableDefaultUI: true    
    }
    this.map = new google.maps.Map(
        document.getElementById("map"), options
    );
    this.places = new google.maps.places.PlacesService(this.map);


  var markers = [{
  "title": 'Capgemini',
  "lat": '45.7154289',
  "lng": '4.9317724',
  "description": 'Capgemini'

    }];
var defaultMarkerColor = 'ff0000';
      var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + defaultMarkerColor);

  // marker object for the marker
  var marker = new google.maps.Marker({
    position: google.maps.LatLng(markers[0].lat,markers[0].lng),
    map: this.map,
    title: markers[0].title,
    animation: google.maps.Animation.DROP,
    icon: pinImage
  });
}

this.search = function(str) {
    var d = $q.defer();
    this.places.textSearch({query: str}, function(results, status) {
        if (status == 'OK') {
            d.resolve(results[0]);
        }
        else d.reject(status);
    });
    return d.promise;
}

this.addMarker = function(res) {
    if(this.marker) this.marker.setMap(null);
    this.marker = new google.maps.Marker({
        map: this.map,
        position: res.geometry.location,
        animation: google.maps.Animation.DROP
    });
    this.map.setCenter(res.geometry.location);
}

});

app.controller('mapController', function($scope, Map) {

$scope.place = {};

$scope.search = function() {
    $scope.apiError = false;
    Map.search($scope.searchPlace)
    .then(
        function(res) { // success
            Map.addMarker(res);
            $scope.place.name = res.name;
            $scope.place.lat = res.geometry.location.lat();
            $scope.place.lng = res.geometry.location.lng();
        },
        function(status) { // error
            $scope.apiError = true;
            $scope.apiStatus = status;
        }
    );
}

$scope.send = function() {
    alert($scope.place.name + ' : ' + $scope.place.lat + ', ' + $scope.place.lng);    
}

Map.init();
});
以及HTML

 <ion-content ng-controller="mapController" style="margin-top: 25px">

<div class="container">

<div id="map" libraries="places" data-tap-disabled="true"></div>


 <form name="searchForm" novalidate 
ng-submit="search()">
    <div class="input-group">
        <input name="place" type="text" class="form-control" 
        ng-model="searchPlace" required autofocus />
        <br>
        <span class="input-group-btn">
            <button class="btn btn-primary" 
            ng-disabled="searchForm.$invalid">Search</button>
        </span>
    </div>
    </form>

</div>


搜寻

地图显示正确,以我选择的坐标为中心,但没有标记。
我将感谢任何帮助

嗨,我花了点时间把小提琴放好……:)

我做了以下更改以使其正常工作:

标记:

  var markers = [{
  "title": 'Capgemini',
  "lat": 45.7154289,
  "lng": 4.9317724,
  "description": 'Capgemini'
}];
然后是标记定义

var marker = new google.maps.Marker({
    position:{lat: markers[0].lat, lng: markers[0].lng},
    map: this.map,
    title: markers[0].title,
    animation: google.maps.Animation.DROP,
    icon: pinImage
  });
最简单的方法是用数字表示坐标

在这里你可以找到 它不是超级干净的,它是很多调试的东西,最重要的是,如果你可以初始化并看到你并不真正需要的映射

希望这有帮助