【问题标题】:Leaflet js adding custom marker pic failsLeaflet js添加自定义标记图片失败
【发布时间】:2015-06-13 01:57:28
【问题描述】:

我正在尝试添加自定义标记图片,但它一直给我标准的蓝色标记。 这是我的自定义标记定义:

var aMarker = {
                        lat:location.lat,
                        lng:location.lng,
                        message: location.name,
                        //                focus: true,
                        draggable: false,
                        getMessageScope: function() { return $scope; },
                        message: '<button class="icon-left ion-information-circled" ng-click=""></button>&nbsp;&nbsp;&nbsp;'+location.name,
                        compileMessage: true,
                        'icon': {
                          'type': "awesomeMarker", // i use awesomeMarker for font awesome
                          'icon': spotMarkerIcon, // a variable for my icon
                         }
                };

var spotMarkerIcon = L.icon({
    iconUrl: './images/SpotMarker.png'
});

angular.extend($scope,{
             defaults: {
                    tileLayer: 'http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}',
                    maxZoom: 16,
                    zoomControlPosition: 'topright',
                    path: {
                        weight: 10,
                        color: '#800000',
                        opacity: 1
                    }
    }
});

angular.extend($scope,{
    markers : new Array() 
});

$scope.markers.push(aMarker);

【问题讨论】:

    标签: javascript angularjs leaflet angular-leaflet-directive


    【解决方案1】:

    您是否尝试过这样定义图标的尺寸:

    var greenIcon = L.icon({
        iconUrl: 'leaf-green.png',
        shadowUrl: 'leaf-shadow.png',
    
        iconSize:     [38, 95], // size of the icon
        shadowSize:   [50, 64], // size of the shadow
        iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
        shadowAnchor: [4, 62],  // the same for the shadow
        popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
    });
    

    编辑:这是一个工作示例:http://jsfiddle.net/beLxbfep/

    【讨论】:

    • 不,但你是对的,我应该尝试默认示例并从那里开始。我已经在考虑是否可能是我的标签图形大小与 iconSize 不匹配...?其实我希望它会缩放到指定的iconSize。
    • 我回到这个问题并尝试使用示例。我将图形复制到根文件夹并将它们添加到带有图标的标记:greenIcon。不起作用,它一直显示蓝色标记。我没有看到它找不到图形的错误日志......有什么想法吗?
    • 请使用我从 url 引用图标的工作示例找到编辑。希望这会有所帮助。
    • 我同意,这可行,但我的应用程序是基于 Ionic / Angular 的,并且我使用的是 angular-leaflet-directive。我像上面编辑的代码一样设置了页面,它在没有初始化地图对象的情况下运行。我的问题显然是如何向“不存在”的地图对象添加标记。将标记添加到数组中有效,但仅显示蓝色标记...
    • 我现在发现了这个:tombatossals.github.io/angular-leaflet-directive/examples/…。希望它会有所帮助......
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多