Question

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

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

插件documentation marker directive有一个options属性，引用Google maps API docs，其中google.maps.MarkerOptions -

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

我尝试过这样的应用

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>

如何在Google地图角度插件

2 个答案: