MENAMPILKAN STREETVIEW SECARA INTERAKTIF !!!

PENDAHULUAN

Artikel berikut hanya menyajikan terjemahan dari sumber aselinya disini : StreetView any Address !!!. Tujuannya hanya untuk pembelajaran dan sharing. Karena bahasa inggris saya tiarap, jadi artikel saya terjemahin sekenanya, jadi apabila ada yang tersesat, mohon mangap ! 😀

OK, saya mulai nerjemahin …mohon sediakan kamus besar untuk jamu 😛

Saya (Cesar Chalom) baru saja menerima permintaan dari user untuk memungkinkan dia melihat Google StreetView kedalam Form. Khusus untuk kasus pengiriman, hal ini akan berguna, yang memungkinkan bagi tim untuk mengetahui rute jalan, dan melakukan perencanaan pengiriman merchandise.

Saya menemukan beberapa contoh, tetapi supaya bisa digunakan, semua contoh tersebut memerlukan GPS untuk mengetahui koordinat garis Lintang & Bujur.

Setelah membuat beberapa percobaan, saya telah menemukan solusinya dari Jordan Clist yang ditulis diblog JAYCODE DESIGN

Everyone loves the streetview service that Google maps provides. Naturally the Google API provides the ability to embed streetview within a web application if you feed it the right data and co-ordinates.
 
What it doesn’t do naturally and easily is automatically point the streetview camera an address.
This is something that I thought would be simple but was actually more difficult than it sounds.
 
Although it is fairly simple to create a streetview panorama at a given GPS point, what is more complicated is to ensure that the streetview camera is pointing in the correct direction (point of view, or yaw).

Mengerjakan hal itu sedikit rumit, karena contoh asli yang disediakan hanya bekerja dengan beberapa alamat yang sudah dikenal oleh Google. Yang membuatnya gagal dalam banyak kasus, karena ejaan, atau bahkan koma dimasukkan ke dalam tempat yang salah.

Jadi saya menggunakan API lain Google Maps, “Google Maps Directions API”, awalnya itu kami gunakan untuk menampilkan rute antara 2 alamat. API ini bekerja sangat baik, menunjukkan arah yang benar meskipun dengan penulisan alamat yang tidak sempurna.

Saya mengambil contoh dari Mike Gagnon dalam artikelnya “Calculer la distance entre 2 adresses, et montrer l’itineraire complet”, diterbitkan di http://authfox.org

Setelah mendapatkan petunjuk tersebut, saya memasukkannya kedalam skrip program dari Jordan Clist dan Voila! Berhasil!!!

Copy dan paste kode di bawah ini, simpan dengan nama “googlestreetview.prg”


* Program: GOOGLESTREETVIEW.PRG
* Author: Cesar VFPIMAGING - www.vfpimaging.blogspot.com
* Description:
* Gets GoogleMaps full address, from the destination variable filled with the most complete info
* Creates a HTML / AJAX
* Thanks to Jordan Clist, code adapted from the one he osted in his blog:
* http://www.jaycodesign.co.nz/js/using-google-maps-to-show-a-streetview-of-a-house-based-on-an-address/
* Thanks to Mike Gagnon for his article published at
* http://atoutfox.org/articles.asp?ACTION=FCONSULTER&ID=0000000807
* "Calculer la distance entre 2 adresses, et montrer l'itineraire complet"

LPARAMETERS tcDestination

LOCAL loXML AS "MSXML2.ServerXMLHTTP.4.0"
LOCAL lcFullURL, lcResponse, lcRouteParameters
tcDestination          = EVL(tcDestination, "")

lcRouteParameters = "origin=" + STRTRAN(UPPER(ALLTRIM(tcDestination)), " ", "%20") + ;
					"&destination=" + STRTRAN(UPPER(ALLTRIM(tcDestination)), " ", "%20")

* Documentation at http://code.google.com/apis/maps/documentation/directions/)
* Build up the full URL with the required parameters
lcFullURL = "http://maps.googleapis.com/maps/api/directions/xml?" + lcRouteParameters + ;
			"&units=metrics&sensor=false"


* Test with all XML Versions
* Can also apply the info from http://support.microsoft.com/kb/278674/en-us
* to determine what version of MSXML is installed in the machine
TRY 
	loXML = CREATEOBJECT("MSXML2.ServerXMLHTTP.4.0") && Could use version 3.0, 4.0, 5.0, 6.0
CATCH
	TRY 
		loXML = CREATEOBJECT("MSXML2.ServerXMLHTTP.3.0") && Could use version 3.0, 4.0, 5.0, 6.0
	CATCH 
		TRY
			loXML = CREATEOBJECT("MSXML2.ServerXMLHTTP.5.0") && Could use version 3.0, 4.0, 5.0, 6.0
		CATCH
			TRY 
				loXML = CREATEOBJECT("MSXML2.ServerXMLHTTP.6.0") && Could use version 3.0, 4.0, 5.0, 6.0
			CATCH 
			ENDTRY 
		ENDTRY 
	ENDTRY 
ENDTRY 

loXML.OPEN("POST", lcFullURL, .F.)
loXML.SetRequestHeader("Content-Type", "application/xml")
loXML.SEND("")
lcResponse = loXML.ResponseText

LOCAL lcAddress, lcHTML
lcAddress = STREXTRACT(lcResponse, "<end_address>", "</end_address>")

TEXT TO lcHTML NOSHOW TEXTMERGE
<!DOCTYPE html>
<html>
<head>
<style>
	body {
		font-family: helvetica;
	}
	.map_container {
		width: 800px;
		height:800px;
	}
	#map_canvas_cont, #pano_cont {
		float: left;
		width: 750px;
		height: 400px;
		margin: 20px;
	}

	#pano, #map_canvas {
		width: 100%;
		height: 100%;
	}

</style>
http://maps.google.com/maps/api/js?sensor=false&region=us
</head>
<body>
	
</div>
</div> </div> http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js var panorama; var addLatLng; var showPanoData; var panorama; function load_map_and_street_view_from_address(address) { // Check if GPS has been locally cached. var geocoder = new google.maps.Geocoder(); console.log("new geocoder"); geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { var gps = results[0].geometry.location; create_map_and_streetview(gps.lat(), gps.lng(), 'map_canvas', 'pano'); } }); } function showPanoData(panoData, status) { if (status != google.maps.StreetViewStatus.OK) { $('#pano').html('No StreetView Picture Available').attr('style', 'text-align:center;font-weight:bold').show(); return; } var angle = computeAngle(addLatLng, panoData.location.latLng); var panoOptions = { position: addLatLng, addressControl: false, linksControl: false, panControl: false, zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL }, pov: { heading: angle, pitch: 10, zoom: 1 }, enableCloseButton: false, visible:true }; panorama.setOptions(panoOptions); } function create_map_and_streetview(lat, lng, map_id, street_view_id) { panorama = new google.maps.StreetViewPanorama(document.getElementById("pano")); addLatLng = new google.maps.LatLng(lat,lng); var service = new google.maps.StreetViewService(); service.getPanoramaByLocation(addLatLng, 50, showPanoData); var myOptions = { zoom: 16, center: addLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP, backgroundColor: 'transparent', streetViewControl: false, keyboardShortcuts: false } console.log("Create map marker") var map = new google.maps.Map(document.getElementById(map_id), myOptions); var marker = new google.maps.Marker({ map:map, animation: google.maps.Animation.DROP, position: addLatLng }); console.log("Create map marker 2") } function computeAngle(endLatLng, startLatLng) { var DEGREE_PER_RADIAN = 57.2957795; var RADIAN_PER_DEGREE = 0.017453; var dlat = endLatLng.lat() - startLatLng.lat(); var dlng = endLatLng.lng() - startLatLng.lng(); // We multiply dlng with cos(endLat), since the two points are very closeby, // so we assume their cos values are approximately equal. var yaw = Math.atan2(dlng * Math.cos(endLatLng.lat() * RADIAN_PER_DEGREE), dlat) * DEGREE_PER_RADIAN; return wrapAngle(yaw); } function wrapAngle(angle) { if (angle >= 360) { angle -= 360; } else if (angle >"); $('#change_street').click(function(){ $('form').submit(); }); }); </body> </html> ENDTEXT * Save the HTML to a local file on the disk LOCAL lcFile lcFile = ADDBS(GETENV("TEMP")) + SYS(2015) + ".htm" STRTOFILE(lcHTML, lcFile) * Show the StreetView RUN /N6 Explorer.EXE &lcFile.

 

Untuk mengujinya, buka “Command Window”, dan ketikkan perintah dibawah ini:


=GoogleStreetView("Arche du Triumph")

atau masukkan dengan alamat lengkap:


=GoogleStreetView("Place Charles de Gaulle, 75008, Paris, France")

Download VFPGoogleStreetView.prg

Advertisements