Angular 谷歌地图自定义标记

Question

我很难让自定义标记图标与我设置的谷歌地图一起使用。我只需要一个标记我通过工厂传入的纬度和经度。我不需要多个标记。

在我的控制器内部：

var mapOptions = {
    panControl    : true,
    zoomControl   : true,
    scaleControl  : true,
    mapTypeControl: true,
    mapTypeId     : google.maps.MapTypeId.ROADMAP
};
$scope.map = ($scope,{
    center: {
        latitude: $scope.lat,
        longitude: $scope.long
    },
    zoom: 13,
    options: mapOptions,
    icon: '{url:"https://vacationcandy.com/assets/images/lollipin.png"}',
});
$scope.beachMarker = new google.maps.Marker({
    position: $scope.map.center,
    map: $scope.map,
    icon: '{url:"https://vacationcandy.com/assets/images/lollipin.png"}'
});
var updateCenter = function() {
    $scope.map.center.latitude= $scope.lat;
    $scope.map.center.longitude= $scope.long;
}
$scope.$watch('lat', function() {
    updateCenter();
});

这是我的 HTML：

<ui-gmap-google-map center='map.center' zoom='map.zoom' id='map-canvas' icon='"beachMarker.icon"'></ui-gmap-google-map>

我尝试了很多不同的方法，甚至在 ui-gmap-google-map 中使用了 google marker 指令，但我似乎无法让它工作。我做错了什么？

Answer 1

你根本不添加标记是吗？尝试一些类似的东西（未测试）：

<ui-gmap-google-map center="map.center" zoom="map.zoom" id="map-canvas">
  <ui-gmap-marker coords="map.center" icon="map.icon" idKey="1">
  </ui-gmap-marker>
</ui-gmap-google-map>

请先查看docs，然后再尝试破解您的方法以使其与网络上的随机示例一起使用。标记文档非常清晰。