Googleマップ：デザインカスタム価格マーカー

Question

私はイオン使用してモバイルアプリケーションを開発し、このような価格マーカーでGoogleマップで場所を表示するための要件を持っている：

私はに非常に基本的なコードを書きましたマーカーとGoogleマップを統合します。

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' } 
    }]; 

<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> 

HTMLは現在、私は非表示にし、代わりに、価格だけを表示したいデフォルトのマーカーアイコンを取得しています。

私は、カスタムマーカーを実装するための正しい方法についての明確な情報のための長い検索してきたが、私が得る結果は私を満足していませんでした。

だから私はこれを実装するために何をすべきでしょうか？あなたは、CSS/HTMLを使用して任意のマーカーを作成し、カスタマイズすることができgoogle.maps.OverlayViewクラスを拡張して

Answer 1

。このクラスを拡張する独自のカスタムマーカーのディレクティブを作成できます。たとえば、thisチュートリアルが役立ちます。

別のオプションは、すでにカスタムマーカーのサポートが含まれ、たとえばng-mapため、angularjs Googleマップのために別のライブラリを使用することです。