谷歌地图：设计自定义价格标记

Question

我正在使用Ionic开发移动应用，需要在谷歌地图上显示价格标记的位置，就像这样：

我编写了一个非常基本的代码来将谷歌地图与标记集成。
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>

目前，我得到的是默认标记图标，我想隐藏它，而只显示价格。

我一直在寻找有关实现自定义标记的正确方法的清晰信息，但我得到的结果并没有让我满意。

那么，我应该怎么做来实现这个呢？

- Tushar

---

你想要什么样的输出？ - Zakaria Acharki

@ZakariaAcharki 我在图片中展示的那个..类似那样的东西。 - Tushar

那么这不是你的情况吗？展示一下你的情况，并请附上你的代码。 - Zakaria Acharki

@ZakariaAcharki 我已经添加了代码，我希望我的制造者看起来与我展示的图像相同。 - Tushar

这个答案对我有用：https://dev59.com/TVwY5IYBdhLWcg3wlohg#37582234 - NicolasZ

Answer 1

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

另一种选择是使用不同的库来处理angularjs google maps，例如ng-map ，它已经包含了对自定义标记的支持。

- Matej P.