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

Question

我正在使用 angularjs google 地图 (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

<div ng-controller="markersController" class="map-fullscreen-container">
<map zoom="8" center="[-26.82, -54.84]" class="fullscreen">

  <info-window id="marker-info">
    <div ng-non-bindable="">
      <strong class="markerTitle">{{ infoWindow.title }}</strong>
      <div class="markerContent">
        <p>{{ infoWindow.content }}</p>
      </div>
    </div>
  </info-window>

  <marker ng-repeat="(id, marker) in markers" id="{{ id }}" 
  position="{{marker.location}}" 
  on-click="showMarker(event, $index)" >
  </marker>

 </map>
</div>

Answer 1

如果您只有一个标记，您可以直接在 marker 指令中设置它：

<marker ng-repeat="(id, marker) in markers" id="{{ id }}" 
            position="{{marker.location}}" 
            on-click="showMarker(event, $index)"
            icon="yourIconUrl.png" >
</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 指令中：

<marker ng-repeat="(id, marker) in markers" id="{{ id }}" 
        position="{{marker.location}}" 
        on-click="showMarker(event, $index)"
        icon="{{marker.icon}}" >
</marker>

就是这样，希望对您有所帮助。

更多信息请参考文档： https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/docs/index.html

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

How to change icon marker with angularjs and google maps

google-maps

phonegap-plugins

angularjs

cordova