Langkah 1:
ionic start katmanastart sidemenu
- untuk jana atau muat turun framework ionic, kemudian ambil folder www sahaja.
Langkah 2:
Intel@XDK - New Project - Templates - Blank - HTML5+Cordova - Continue - katmana (nama projek)
Langkah 3:
Delete folder www dalam folder katmana. Copy folder www dari folder katmanastart dan paste ke dalam folder katmana.
Folder katmanastart dah boleh padam.
Langkah 4:
Project - Plugin Management - Add plugins to this Project:
- Geolocation
- Notification
- File
- File Transfer
Langkah 5:
Tambah function dalam stateprovider...
.state('app.peta', {
url: '/peta',
views: {
'menuContent': {
templateUrl: 'templates/peta.html',
controller: 'PetaCtrl'
}
}
})
Tukarkan..
$urlRouterProvider.otherwise('/app/playlists');
kepada
$urlRouterProvider.otherwise('/app/peta');
dalam fail app.js.
Langkah 6:
Masukkan..
.controller('PetaCtrl', function($scope,$http,$state) {
// Wait for device API libraries to load
document.addEventListener("deviceready", onDeviceReady, false);
var watchID = null;
// device APIs are available
function onDeviceReady() {
//initial map
navigator.geolocation.getCurrentPosition(initMap, onError);
//update/watch location
var watchID = navigator.geolocation.watchPosition(onSuccess, onError, { enableHighAccuracy: true});
}
var telefon = '0122494234';
var user_id = '1';
var host = "http://crockcms.net/my/"; //server: http://crockcms.net/my/ local:http://localhost:8888/crockcms/
// onSuccess Geolocation
var mymarker=null;
function onSuccess(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
var myLatlng = new google.maps.LatLng(lat, long);
if(mymarker==null){
var iconimage = new google.maps.MarkerImage('/img/marker-oren.png',
null, /* size is determined at runtime */
null, /* origin is 0,0 */
null, /* anchor is bottom center of the scaled image */
new google.maps.Size(42, 42) //new google.maps.Size(42, 68)
);
mymarker = new google.maps.Marker({
position: myLatlng,
map: $scope.map,
animation: google.maps.Animation.DROP,
icon: iconimage
});
mymarker.setMap($scope.map);
}else{
mymarker.setPosition(myLatlng);
}
//try simpan location
var timer = setInterval(function() {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var http = new XMLHttpRequest();
var url = host+"mymap/geolog/simpanlatlong/";
var params = "user_id=" + user_id +
"&telefon=" + telefon +
"&latitude=" + latitude +
"&longitude=" + longitude
http.open("POST", url, true);
http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
http.onreadystatechange = function(){
if(http.status == 200){
//eh, nak buat apa kat sini..
}
}
http.send(params);
}(), 10000)
}
function initMap(position) {
//map
var map;
var mapOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
var geolocate = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(geolocate);
$scope.map = map;
//letak button - my location
addYourLocationButton(map);
//set marker lokasi member lain
getMarkers();
}
//rujukan: https://modernweb.com/google-maps-markers/
//Time between marker refreshes
var INTERVAL = 1000;
//Used to remember markers
var markerStore = {};
function getMarkers() {
var mynumber = telefon;
$http.get(host+'mymap/geolog/get_all_without/'+mynumber).then(function(response){
var jsonData = response.data;
for (var i = 0; i < jsonData.markers.length; i++) {
//Do we have this marker already?
if(markerStore.hasOwnProperty(jsonData.markers[i].telefon)) {
var memberLoc = new google.maps.LatLng(jsonData.markers[i].latitude, jsonData.markers[i].longitude);
markerStore[jsonData.markers[i].telefon].setPosition(memberLoc);
//set center map - lokasi sendiri ikut telefon
/*
if(telefon==jsonData.markers[i].telefon){
$scope.map.setCenter(memberLoc);
}
*/
} else {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(jsonData.markers[i].latitude,jsonData.markers[i].longitude),
title:jsonData.markers[i].telefon,
map: $scope.map,
});
markerStore[jsonData.markers[i].telefon] = marker;
}
}
window.setTimeout(getMarkers,INTERVAL);
})
}
// onError Callback receives a PositionError object
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
//go to current location dalam map
function addYourLocationButton (map)
{
var controlDiv = document.createElement('div');
//button atas map
var firstChild = document.createElement('button');
firstChild.style.backgroundColor = '#fff';
firstChild.style.border = 'none';
firstChild.style.outline = 'none';
firstChild.style.width = '28px';
firstChild.style.height = '28px';
firstChild.style.borderRadius = '2px';
firstChild.style.boxShadow = '0 1px 4px rgba(0,0,0,0.3)';
firstChild.style.cursor = 'pointer';
firstChild.style.marginRight = '10px';
firstChild.style.padding = '0';
firstChild.title = 'Your Location';
controlDiv.appendChild(firstChild);
var secondChild = document.createElement('div');
secondChild.style.margin = '5px';
secondChild.style.width = '18px';
secondChild.style.height = '18px';
secondChild.style.backgroundImage = 'url(https://maps.gstatic.com/tactile/mylocation/mylocation-sprite-2x.png)';
secondChild.style.backgroundSize = '180px 18px';
secondChild.style.backgroundPosition = '0 0';
secondChild.style.backgroundRepeat = 'no-repeat';
firstChild.appendChild(secondChild);
google.maps.event.addListener(map, 'center_changed', function () {
secondChild.style['background-position'] = '0 0';
});
firstChild.addEventListener('click', function () {
var imgX = '0',
animationInterval = setInterval(function () {
imgX = imgX === '-18' ? '0' : '-18';
secondChild.style['background-position'] = imgX+'px 0';
}, 500);
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(latlng);
clearInterval(animationInterval);
secondChild.style['background-position'] = '-144px 0';
});
} else {
clearInterval(animationInterval);
secondChild.style['background-position'] = '0 0';
}
});
controlDiv.index = 1;
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv);
}
})
dalam fail controller.js
Langkah 7:
Bina fail baru dalam folder templates dan namakannya peta.html. Isi kandungannya..
<ion-view view-title="Map">
<ion-content data-tap-disabled="true" >
<div id="map" data-tap-disabled="true"></div>
</ion-content>
</ion-view>
Langkah 8:
Tambahkan..
.scroll{
height: 100%;
}
#map{
height: 100%;
width: 100%;
}
dalam fail style.css.
Langkah 9: Hasilkan paparan Peta.
Masukkan..
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">
di bahagian <head> dalam fail index.html.
Masukkan..
<!-- google map -->
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key={Google Map API Key}">
</script>
sebelum </body> dalam fail index.html.
* Nota:
Bahagian update data ke database belum buat lagi...
