Question

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

这是我的代码：

控制器

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>

地图正确显示，并以我选择的坐标为中心，但没有标记。我将不胜感激任何帮助。

Answer 1

嗨，我带了一些时间把小提琴放到位置...... :)

我做了这些更改以使其正常工作：

标记：

  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上

1 个答案: