GoogleMaps:设计自定义价格标记

Question

我正在开发一个使用离子的移动应用程序,并要求在谷歌地图中显示带有价格标记的地方,如下所示:

我写了一个非常基本的代码来集成谷歌地图和标记.

MapController

controller('MapController', function($scope, uiGmapGoogleMapApi, $log, $timeout, $state) {

    $scope.map = { center: { latitude: 12.9250, longitude: 77.5938 }, zoom: 8, window: { show: false } };
    $scope.options = { scrollwheel: false };

    $scope.markerEvents = {
        events: {
            dragend: function(marker, eventName, args) {
                var lat = marker.getPosition().lat();
                var lon = marker.getPosition().lng();
                $log.log(lat);
                $log.log(lon);

                $scope.marker.options = {
                    draggable: true,
                    labelContent: "lat: " + $scope.marker.coords.latitude + ' ' + 'lon: ' + $scope.marker.coords.longitude,
                    labelAnchor: "100 0",
                    labelClass: "marker-labels"
                };
            }
        }
    };

    $scope.markers = [{

        id: 0,
        coords: {
            latitude: 12.8421,
            longitude: 77.6631
        },
        options: { draggable: false, icon: '',  labelClass: 'marker_labels', labelAnchor: '12 60', labelContent: '$400' }

    }, {
        id: 1,
        coords: {
            latitude: 12.1481,
            longitude: 77.5631
        },
          options: { draggable: false, icon: '',  labelClass: 'marker_labels', labelAnchor: '12 60', labelContent: '$600' }

    }, {
        id: 2,
        coords: {
            latitude: 12.3411,
            longitude: 77.4631
        },
          options: { draggable: false, icon: '',  labelClass: 'marker_labels', labelAnchor: '12 60', labelContent: '$550' }

    }, {
        id: 3,
        coords: {
            latitude: 12.5420,
            longitude: 77.3631
        },
          options: { draggable: false, icon: '',  labelClass: 'marker_labels', labelAnchor: '12 60', labelContent: '$900' }
    }];

HTML

<ion-view view-title="Maps">
    <ion-content class="padding">
        <div class="list">
            <ui-gmap-google-map center='map.center' zoom='map.zoom' draggable="true" options="options">
                <ui-gmap-marker ng-repeat="marker in markers" coords="marker.coords" options="marker.options" events="markerEvents.events" idkey="marker.id" click="onMarkerClick">
                </ui-gmap-marker>
            </ui-gmap-google-map>
        </div>
    </ion-content>
</ion-view>

目前,我正在获取我想要隐藏的默认标记图标,而只是显示价格.

我一直在寻找有关正确实现自定义标记的正确方法的明确信息,但我得到的结果并不让我满意.

那么我该怎么做呢？

Answer 1

通过扩展该类，google.maps.OverlayView您可以使用 css/html 创建和自定义任何标记。您可以为扩展此类的自定义标记创建自己的指令，例如教程可能会对您有所帮助。

另一种选择是为 angularjs 谷歌地图使用不同的库，例如ng-map，它已经包含对自定义标记的支持。