GoogleMaps: projekt Custom Cena Marker

Question

Zajmuję się tworzeniem aplikacji mobilnych przy użyciu jonowe i ma wymogu, aby pokazać miejsca na mapach Google z markerem cenowym jak ten:

napisałem bardzo prosty kod do zintegrować mapę google ze znacznikami.

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> 

Obecnie Dostaję domyślną ikonę znacznika które chcesz ukryć i zamiast po prostu pokazać cenę.

Długo szukałem jasnych informacji o prawidłowym sposobie implementacji niestandardowego znacznika, ale wynik, który otrzymałem, nie był dla mnie satysfakcjonujący.

Co powinienem zrobić, aby to wdrożyć?

Answer 1

Po rozszerzeniu klasy google.maps.OverlayView można utworzyć i dostosować dowolny znacznik za pomocą css/html. Możesz utworzyć własną dyrektywę dla własnego markera, która rozszerza tę klasę, na przykład tutorial this może Ci pomóc.

Inną opcją jest użycie innej biblioteki dla map google angularjs, na przykład ng-map, które już zawierają obsługę niestandardowych znaczników.