谷歌地圖：設計定製的價格標記

我使用的離子和有一個規定，以顯示在谷歌地圖與價格標記這樣的地方開發移動應用程序：谷歌地圖：設計定製的價格標記

我寫了一個非常基本的代碼整合谷歌地圖與標記。

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>

目前，我得到它我想隱藏，而是隻顯示價格默認標記圖標。

我一直在尋找關於實現自定義標記的正確方法的明確信息，但是得到的結果並未令我滿意。

那麼我該怎麼做才能實現呢？

來源

2016-04-23 Ricky

你想要的輸出是什麼？ –

@ZakariaAcharki我在圖片中展示的那個......就像那樣 – Ricky

那麼它不是你的照片？向我們展示你的樣子，請添加你的代碼。 –

通過擴展google.maps.OverlayView類，您可以使用css/html創建和自定義任何標記。您可以爲自定義標記創建自己的指令，以擴展此類，例如this教程可能會對您有所幫助。

另一種選擇是爲angularjs谷歌地圖使用不同的庫，例如ng-map，其中已包含對自定義標記的支持。

來源

2016-04-23 22:06:27

谷歌地圖：設計定製的價格標記

回答

相關問題