如何使用angularjs和谷歌地图更改图标标记

我正在使用angularjs谷歌地图(https://github.com/allenhwkim/angularjs-google-maps)在phonegap项目中工作我需要使用自定义图像更改默认图标标记.这是我的控制器代码:

core.js

// Map Markers Controller

app.controller('markersController', function($scope, $compile){

$scope.infoWindow = {
    title: 'title',
    content: 'content'
};

$scope.markers = [
    {
        'title' : 'Location #1',
        'content' : 'Lorem ipsum dolor sit amet, consectetur adipiscing     elit. Cras a viverra magna',
        'location'  : [40.7112, -74.213]
    }, 
    {
        'title' : 'Location #2',
        'content' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a viverra magna',
        'location'  : [40.7243, -74.2014]
    }, 
    {
        'title' : 'Location #3',
        'content' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a viverra magna',
        'location'  : [40.7312, -74.1923]
    }
];

$scope.showMarker = function(event){

    $scope.marker = $scope.markers[this.id];
    $scope.infoWindow = {
        title: $scope.marker.title,
        content: $scope.marker.content
    };
    $scope.$apply();
    $scope.showInfoWindow(event, 'marker-info', this.getPosition());
 }
});

这是我的markers.html

Fedaykin.. 5

如果您只有一个标记,则可以直接在marker指令上进行设置:

如果每个项目都有不同的标记,则首先需要将icon属性添加到项目中:

$scope.markers = [
    {
        'title' : 'Location #1',
        'content' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a viverra magna',
        'location'  : [40.7112, -74.213],
        'icon' : 'yourIconUrl.png'
    }, 
    {
        'title' : 'Location #2',
        'content' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a viverra magna',
        'location'  : [40.7243, -74.2014],
        'icon' : 'yourIconUrl.png'
    }, 
    {
        'title' : 'Location #3',
        'content' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a viverra magna',
        'location'  : [40.7312, -74.1923],
        'icon' : 'yourIconUrl.png'
    }
];

然后你需要在你的html上使用它,通过将它添加到marker指令:

就是这样,希望有所帮助.

有关详细信息,请参阅文档:https: //rawgit.com/allenhwkim/angularjs-google-maps/master/build/docs/index.html

如果您只有一个标记,则可以直接在marker指令上进行设置:

如果每个项目都有不同的标记,则首先需要将icon属性添加到项目中:

$scope.markers = [
    {
        'title' : 'Location #1',
        'content' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a viverra magna',
        'location'  : [40.7112, -74.213],
        'icon' : 'yourIconUrl.png'
    }, 
    {
        'title' : 'Location #2',
        'content' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a viverra magna',
        'location'  : [40.7243, -74.2014],
        'icon' : 'yourIconUrl.png'
    }, 
    {
        'title' : 'Location #3',
        'content' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a viverra magna',
        'location'  : [40.7312, -74.1923],
        'icon' : 'yourIconUrl.png'
    }
];

然后你需要在你的html上使用它,通过将它添加到marker指令:

就是这样,希望有所帮助.

有关详细信息,请参阅文档:https: //rawgit.com/allenhwkim/angularjs-google-maps/master/build/docs/index.html