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

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

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
        },labelContent: '$600' }

    },{
        id: 2,coords: {
            latitude: 12.3411,longitude: 77.4631
        },labelContent: '$550' }

    },{
        id: 3,coords: {
            latitude: 12.5420,longitude: 77.3631
        },labelContent: '$900' }
    }];

HTML