Question

我正在尝试添加icone，但没有显示我的图标，它始终显示默认图标

HTML

<ui-gmap-google-map center="vm.map.center" zoom="vm.map.zoom" options="options">
<ui-gmap-marker icon="vm.options.icon" coords="vm.marker.coords" events="vm.marker.events" idkey="vm.marker.id">
</ui-gmap-marker>
 </ui-gmap-google-map>

控制器

  var vm = this;


    vm.map = {
        center: {
            latitude: 43.6042600,
            longitude: 1.4436700
        },
        zoom: 10
    };

vm.options = {icon:'images/location.png'};
    vm.coordsUpdates = 0;
    vm.dynamicMoveCtr = 0;
    vm.marker = {
        id: 0,
        coords: {
            latitude: 43.6042600,
            longitude: 1.4436700
        },
        events: {
            dragend: function(marker, eventName, args) {
                var lat = marker.getPosition().lat();
                var lon = marker.getPosition().lng();
                $log.log(lat);
                $log.log(lon);
                vm.marker.options = {
                    draggable: false,
                    labelContent: "",
                    labelAnchor: "100 0",
                    labelClass: "marker-labels"
                };
            }
        }
    };

Answer 1

要实现自定义图标，您可以使用以下代码段：

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: 'url_of_your_custom_image.png'
  });

如需进一步说明，您可以浏览谷歌地图文档，其中提到了如何customize a map marker。

Answer 2

icon= '{url:"putyoururlhere" }

图标应该是一个对象

Answer 3

要设置自定义图标，您可以使用options指令

的ui-gmap-marker属性

<强>演示

angular.module('appMaps', ['uiGmapgoogle-maps'])

    .config(function (uiGmapGoogleMapApiProvider) {
        uiGmapGoogleMapApiProvider.configure({
            key: ''
        });
    })
    .controller('mapCtrl', function ($scope, uiGmapIsReady) {
        $scope.map = { center: { latitude: 40.1451, longitude: -99.6680 }, zoom: 4, bounds: {} };
        $scope.options = { scrollwheel: false };

        $scope.marker = {
            id: 0,
            coords: {
                latitude: 40.1451,
                longitude: -99.6680
            },
            options: {
                draggable: false,
                icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
            },
            events: {}
        };

    });

.angular-google-map-container {
   height: 320px;
}

 <script src="https://code.angularjs.org/1.3.14/angular.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
 <script src="https://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
 <div ng-app="appMaps" ng-controller="mapCtrl">
    <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options">
        <ui-gmap-marker coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
        </ui-gmap-marker>
    </ui-gmap-google-map>
  </div>

Angular谷歌地图自定义图标

3 个答案: