Embed Size (px)
Citation preview
Phone Gap -
Cordova
رياض خليفة: المهندس
التعامل مع الخريطة الثابتةStatic Map
HTML:
<div id="map_holder">Drawing Map...</div>
JavaScript: var mapOutput = '<img
src="http://maps.googleapis.com/maps/api/staticmap?
center='+position.coords.latitude+','+position.coords.lon
gitude+'&zoom=12&size=200x200">';
var element = document.getElementById('map_holder');
element.innerHTML = mapOutput;
التعامل مع الخريطة الثابتة
Static Map
التعامل مع الخريطة الثابتةStatic Map
JavaScript: var mapOutput = '<img
src="http://maps.googleapis.com/maps/api/staticmap?
center='+position.coords.latitude+','+position.coords.lon
gitude+'&zoom=12&size=200x200&scale=2">';
التعامل مع الخريطة الثابتة
Static Map
التعامل مع الخريطة الثابتةStatic Map
JavaScript: var mapOutput = '<img
src="http://maps.googleapis.com/maps/api/staticmap?
center='+position.coords.latitude+','+position.coords.lon
gitude+'&zoom=12&size=200x200&scale=2&format=jpeg"
>';
PNG: By Default, JPEG: More Compression, GIF.
التعامل مع الخريطة الثابتةStatic Map
JavaScript: var mapOutput = '<img
src="http://maps.googleapis.com/maps/api/staticmap?
center='+position.coords.latitude+','+position.coords.lon
gitude+'&zoom=12&size=200x200&scale=2&format=jpeg
&maptype=roadmap">';
Roadmap: By Default.
التعامل مع الخريطة الثابتة
Static Map
التعامل مع الخريطة الثابتةStatic Map
JavaScript: var mapOutput = '<img
src="http://maps.googleapis.com/maps/api/staticmap?
center='+position.coords.latitude+','+position.coords.lon
gitude+'&zoom=12&size=200x200&scale=2&format=jpeg
&maptype=terrain">';
terrain.
التعامل مع الخريطة الثابتة
Static Map
التعامل مع الخريطة الثابتةStatic Map
JavaScript: var mapOutput = '<img
src="http://maps.googleapis.com/maps/api/staticmap?
center='+position.coords.latitude+','+position.coords.lon
gitude+'&zoom=12&size=200x200&scale=2&format=jpeg
&maptype=satellite">';
satellite.
التعامل مع الخريطة الثابتة
Static Map
التعامل مع الخريطة الثابتةStatic Map
JavaScript: var mapOutput = '<img
src="http://maps.googleapis.com/maps/api/staticmap?
center='+position.coords.latitude+','+position.coords.lon
gitude+'&zoom=12&size=200x200&scale=2&format=jpeg
&maptype=HYBRID ">';
HYBRID.
التعامل مع الخريطة الثابتة
Static Map
التعامل مع الخريطة الثابتةStatic Map
JavaScript: var mapOutput = '<img
src="http://maps.googleapis.com/maps/api/staticmap?center='
+position.coords.latitude+','+position.coords.longitude+'&zoom=1
2&size=200x200&scale=2&format=jpeg&style=feature:road.local
%7Celement:geometry%7Ccolor:0xa1d9e9%7Cweight:1%7Cvisibil
ity:on&style=feature:landscape%7Celement:geometry.fill%7Ccol
or:0xafff00%7Cvisibility:on&style=feature:poi.park%7Celement:ge
ometry%7Ccolor:0xff008e%7Cweight:1%7Cvisibility:on&style=featu
re:poi.government%7Celement:geometry%7Ccolor:0x222729%7
Cweight:1%7Cvisibility:on">‘;
التعامل مع الخريطة الثابتة
Static Map
التعامل مع الخريطة الثابتةStatic Map
JavaScript: var mapOutput = '<img
src="http://maps.googleapis.com/maps/api/staticmap?center='
+position.coords.latitude+','+position.coords.longitude+'&zoom=1
2&size=200x200&scale=2&format=jpeg&style=feature:road.local
%7Celement:geometry%7Ccolor:0xa1d9e9%7Cweight:1%7Cvisibil
ity:on&style=feature:landscape%7Celement:geometry.fill%7Ccol
or:0xafff00%7Cvisibility:on&style=feature:poi.park%7Celement:ge
ometry%7Ccolor:0xff008e%7Cweight:1%7Cvisibility:on&style=featu
re:poi.government%7Celement:geometry%7Ccolor:0x222729%7
Cweight:1%7Cvisibility:off">‘;
التعامل مع الخريطة الثابتةStatic Map
JavaScript: var mapOutput = '<img
src="http://maps.googleapis.com/maps/api/staticmap?center='
+position.coords.latitude+','+position.coords.longitude+'&zoom=1
2&size=200x200&scale=2&format=jpeg&style=feature:road.local
%7Celement:geometry%7Ccolor:0xa1d9e9%7Cweight:1%7Cvisibil
ity:simplified&style=feature:landscape%7Celement:geometry.fill%
7Ccolor:0xafff00%7Cvisibility:on&style=feature:poi.park%7Celem
ent:geometry%7Ccolor:0xff008e%7Cweight:1%7Cvisibility:on&styl
e=feature:poi.government%7Celement:geometry%7Ccolor:0x222
729%7Cweight:1%7Cvisibility:off">‘;
التعامل مع الخريطة الثابتةStatic Map
JavaScript: var mapOutput = '<img
src="http://maps.googleapis.com/maps/api/staticmap?center='
+position.coords.latitude+','+position.coords.longitude+'&zoom=1
2&size=200x200&scale=2&markers=color:blue%7Clabel:S%7C
'+position.coords.latitude+','+position.coords.longitude+‘ ">‘;
• Size: {tiny, mid, small}
• Color: {black, brown, green, purple, yellow, blue, gray, orange,
red, white}
التعامل مع الخريطة الثابتة
Static Map
التعامل مع الخريطة الثابتةStatic Map
JavaScript:
var newLat=position.coords.latitude+1;
var newLong=position.coords.longitude+1; var mapOutput = '<img
src="http://maps.googleapis.com/maps/api/staticmap?center='
+position.coords.latitude+','+position.coords.longitude+'&zoom=6
&size=200x200&scale=2&markers=color:blue%7Clabel:S%7C
'+position.coords.latitude+','+position.coords.longitude+'|'+newLa
t+','+newLong+'">';
التعامل مع الخريطة الثابتة
Static Map
التعامل مع الخريطة الثابتةStatic Map
JavaScript:
var newLat=position.coords.latitude+1;
var newLong=position.coords.longitude+1; var mapOutput = '<img
src="http://maps.googleapis.com/maps/api/staticmap?center='
+position.coords.latitude+','+position.coords.longitude+'&zoom=6
&size=200x200&scale=2&markers=color:blue%7Clabel:S%7C
'+position.coords.latitude+','+position.coords.longitude+'&markers
=color:green%7Clabel:R%7C'+newLat+','+newLong+'">';
التعامل مع الخريطة الثابتة
Static Map
التعامل مع الخريطة الثابتةStatic Map
JavaScript:
var newLat=position.coords.latitude+1;
var newLong=position.coords.longitude+1; var mapOutput = '<img
src="http://maps.googleapis.com/maps/api/staticmap?center='
+position.coords.latitude+','+position.coords.longitude+'&zoom=6
&size=200x200&scale=2&markers=color:blue%7Clabel:S%7C
'+position.coords.latitude+','+position.coords.longitude+'&markers
=color:green%7Clabel:9%7C'+newLat+','+newLong+'">';
التعامل مع الخريطة الثابتة
Static Map
التعامل مع الخريطة الثابتة
Static Map
Icon Max: 64 × 64
http://www.shrinkpictures.com/
التعامل مع الخريطة الثابتةStatic Map
JavaScript:
var newLat=position.coords.latitude+1;
var newLong=position.coords.longitude+1; var mapOutput = '<img
src="http://maps.googleapis.com/maps/api/staticmap?center='
+position.coords.latitude+','+position.coords.longitude+'&zoom=6
&size=200x200&scale=2&markers=color:blue%7Clabel:S%7C
'+position.coords.latitude+','+position.coords.longitude+'&markers
=icon:http://aspspider.info/RiyadKhalifeh/Website/myMap.jpg%7
C'+newLat+','+newLong+'">';
التعامل مع الخريطة الثابتة
Static Map
التعامل مع الخريطة الثابتةStatic Map
var newLat=position.coords.latitude+1;
var newLong=position.coords.longitude+1;
var newLa=position.coords.latitude-1;
var newLon=position.coords.longitude+1; var mapOutput = '<img
src="http://maps.googleapis.com/maps/api/staticmap?center='
+position.coords.latitude+','+position.coords.longitude+'&zoom=6
&size=200x200&scale=2&markers=color:blue%7Clabel:S%7C
'+position.coords.latitude+','+position.coords.longitude+'&markers
=icon:http://aspspider.info/RiyadKhalifeh/Website/myMap.jpg%7
C'+newLat+','+newLong+'|'+newLa+','+newLon+'">';
التعامل مع الخريطة الثابتة
Static Map
التعامل مع الخريطة الثابتةStatic Map
var newLat=position.coords.latitude+1;
var newLong=position.coords.longitude+1;
var newLa=position.coords.latitude-1;
var newLon=position.coords.longitude+1; var mapOutput = '<img
src="http://maps.googleapis.com/maps/api/staticmap?center='+positio
n.coords.latitude+','+position.coords.longitude+'&zoom=6&size=200x200&
scale=2&markers=color:blue%7Clabel:S%7C
'+position.coords.latitude+','+position.coords.longitude+'|'+newLat+','+ne
wLong+'&path=color:0xff0000ff|weight:1|'+position.coords.latitude+','+po
sition.coords.longitude+'|'+newLat+','+newLong+'|'+newLa+','+newLon+'"
>';
التعامل مع الخريطة الثابتة
Static Map
التعامل مع الخريطة الثابتةStatic Map
var newLat=position.coords.latitude+1;
var newLong=position.coords.longitude+1;
var newLa=position.coords.latitude-1;
var newLon=position.coords.longitude+1; var mapOutput = '<img
src="http://maps.googleapis.com/maps/api/staticmap?center='+positio
n.coords.latitude+','+position.coords.longitude+'&zoom=6&size=200x200&
scale=2&markers=color:blue%7Clabel:S%7C
'+position.coords.latitude+','+position.coords.longitude+'|'+newLat+','+ne
wLong+'&path=color:0xff0000ff|weight:5|'+position.coords.latitude+','+po
sition.coords.longitude+'|'+newLat+','+newLong+'|'+newLa+','+newLon+'"
>';
التعامل مع الخريطة الثابتة
Static Map
التعامل مع الخريطة الثابتةStatic Map
var newLat=position.coords.latitude+1;
var newLong=position.coords.longitude+1;
var newLa=position.coords.latitude-1;
var newLon=position.coords.longitude+1; var mapOutput = '<img
src="http://maps.googleapis.com/maps/api/staticmap?center='+positio
n.coords.latitude+','+position.coords.longitude+'&zoom=6&size=200x200&
scale=2&markers=color:blue%7Clabel:S%7C
'+position.coords.latitude+','+position.coords.longitude+'|'+newLat+','+ne
wLong+'&path=color:0xff0000ff|weight:5|fillcolor:0xfdf300|'+position.coor
ds.latitude+','+position.coords.longitude+'|'+newLat+','+newLong+'|'+new
La+','+newLon+'">';
التعامل مع الخريطة الثابتة
Static Map
