5
मैं ईओण का उपयोग कर और एक आवश्यकता इस तरह कीमत मार्कर के साथ गूगल मैप्स में स्थान दिखाने के लिए एक मोबाइल अनुप्रयोग विकसित कर रहा हूँ:GoogleMaps: डिजाइन कस्टम मूल्य मार्कर
मैं करने के लिए एक बहुत ही बुनियादी कोड लिखा था मार्करों के साथ 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>
वर्तमान में, मैं डिफ़ॉल्ट मार्कर आइकन जो मैं छुपाना चाहते हैं और इसके बजाय सिर्फ मूल्य दिखाते हो रही है।
मैं कस्टम मार्कर को लागू करने के सही तरीके के बारे में स्पष्ट जानकारी के लिए लंबे समय से खोज कर रहा हूं, लेकिन परिणाम मुझे प्राप्त नहीं हुआ।
तो इसे लागू करने के लिए मुझे क्या करना चाहिए?
आपका वांछित आउटपुट क्या है? –
@ZakariaAcharki जो मैंने छवि में दिखाया .. कुछ ऐसा है – Ricky
तो यह तस्वीर में आपका मामला नहीं है? हमें दिखाएं कि आपका कैसा दिखता है, और कृपया अपना कोड भी जोड़ें। –