如何在谷歌地图角度插件中设置默认地图标记的样式

Question

我使用的是angular-google-maps的2.0.X版本。

默认情况下，所有标记都是典型的谷歌地图样式（红色指针）。虽然我有点风格 - 要么具有相同的形状但不同的颜色，要么选择其他形状。不涉及任何自定义图像/图标，只是基本但不同的颜色。

插件documentation marker directive 有一个options 属性，它引用Google maps API docs 哪里是google.maps.MarkerOptions -

图标 类型：字符串|图标|前景的符号图标。 如果一个字符串 已提供，它被视为带有字符串的图标 作为网址。

我试过这样应用

var pointObject = {
//other props
options: {
  draggable: false,
  icon: FORWARD_OPEN_ARROW //here
},
active: false
};
$scope.points.push(pointObject);

但这不起作用。

Answer 1

这是我更改标记的解决方案：

在HTML中：

  <md-whiteframe flex="grow" layout-margin>
    <ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options">
      <ui-gmap-marker idKey="1" coords="marker.coords" options="marker.options">
    </ui-gmap-marker>
    </ui-gmap-google-map>
  </md-whiteframe>

在 Controller.ng.js 中：

uiGmapGoogleMapApi.then(function(maps) {

$scope.map = {
  center: {
    latitude: 43.6091569, 
    longitude: 57.4442909
  }, 
  zoom: 13,
  options: {
    scrollwheel: false,
    streetViewControl: false,
    draggable: isDraggable,
  }
};

    $scope.marker = {
      coords : {
        latitude: 47.6091569, 
        longitude: 33.4442909
      },
      options: {
        icon: '/marker.png',
      }
    };

    $scope.window = {...};
  });

记得在控制器中注入uiGmapGoogleMapApi

Answer 2

Google 提供了一些可用于图标的常量here。

在你的控制器中，使用这个：

uiGmapGoogleMapApi
  .then(function (maps) {
    $scope.map = { center: { latitude: 47, longitude: 33 }, zoom: 14 };
    $scope.personMarker = {
      id : 'personMarkerId', //must be unique
      options: {
        // more options: https://developers.google.com/maps/documentation/javascript/3.exp/reference#SymbolPath
        icon: { path: maps.SymbolPath.CIRCLE, scale: 10 }
      }
    };
  })

还有你的 HTML：

<ui-gmap-google-map ng-if="map.center" center="map.center" zoom="map.zoom">
    <ui-gmap-marker coords="map.center" options="personMarker.options" idKey="personMarker.id">
    </ui-gmap-marker>
 </ui-gmap-google-map>