标记未显示在地图角度上

Marker does not show up on map angularjs

本文关键字:地图 显示      更新时间:2023-09-26

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

这是我的代码:

控制器

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

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

在这里你可以找到小提琴它不是很干净,它有很多调试的东西,最重要的是,如果你可以初始化并看到你并不真正需要它的地图。

希望这个帮助