标记不显示在地图上angularjs

问题描述：

我正在使用角地图来创建一个包含标记列表的地图。我有一个显示标记的问题。虽然我没有错误。标记不显示在地图上angularjs

这是我的代码：

控制器

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 
    });

最简单的方法是使用数字作为坐标。

在这里你可以找到fiddle 它不是超级干净，它是很多调试的东西，最重要的是，如果你可以初始化和看到你不真的需要它的地图。

希望得到这个帮助

标记不显示在地图上angularjs

相关推荐