Absrtact: Baidu Map API is a set of JavaScript programming interface, supposedly it should run on the browser. Now, with PhoneGap, we can develop apps that can be used on mobile platforms!
---------------------------------------------
First, installation platform
PHONEGAP supports 5 platforms, IOS, Android, BlackBerry, WebOS, Symbian.
Let's take iOS, for example, to develop a targeted app.
1. Download Xcode
Note that the lion system and the Snow Leopard System installation program is not the same.
A. It can be downloaded from the Apple App Store, but it's very slow, and you can't download it for up to 20% a night. The benefits are free.
B. can also be downloaded to MACX, fast, non-member fees.
C. In fact, you can also find a copy of the installation program, fast, also free ...
2. Download PhoneGap
Download to official website, free of charge, https://github.com/phonegap/phonegap/zipball/1.0.0
Second, the project configuration
1. Start Xcode and select "Create a new Xcode project" from the menu
2. Select "Phonegap-based application" from the list of templates and next
3, enter the company name, project name
4. Select the storage directory.
I usually put it on the table, haha.
5. Right-click the Navigation window on the left side of the item (2 fingers of the trackpad) and click "Show in Finder".
6, find the WWW folder.
7. Drag the WWW folder onto the blue item bar
8. Copy your map HTM file into index.html. Click to run, OK ~
In addition, it is best to deploy to the real machine, many of the functions on the virtual machine are not very useful.
All source code:
<!DOCTYPE HTML>
<HTML>
<Head>
<Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" />
<title>Shunxing Driving School--Mobile version</title>
<Linkrel= "icon"type= "Image/x-icon"href= "Http://www.jixingjx.com/favicon.ico" />
<Metaname= "keyword"content= "Ji Xing Driving School, Shunxing Driving School mobile version, Jixingjiaxiao"/>
<Metaname= "description"content= "Ji Xing Driving School mobile phone version, so that you faster and more accurate to find Shunxing Driving school!" "/>
<Metaname= "Viewport"content= "initial-scale=1.0, User-scalable=no" />
<Scripttype= "Text/javascript"src= "http://api.map.baidu.com/api?v=1.2"></Script>
<style>
body,html, #jx_map{Height:100%;width:100%;padding:0;margin:0;font-size:14px;}
</style>
</Head>
<Body>
<DivID= "Jx_map"></Div>
</Body>
<Scripttype= "Text/javascript">
varMap= NewBmap.map ("Jx_map");
Map.centerandzoom ("Beijing", -);
Map.addcontrol (NewBmap.maptypecontrol ({maptypes:[bmap_normal_map, Bmap_hybrid_map], anchor:bmap_anchor_top_left}));
Map.addcontrol (NewBmap.navigationcontrol ({type:bmap_navigation_control_zoom, anchor:bmap_anchor_bottom_right}));
//defining a control class
functionmylocation () {
This. Defaultanchor=Bmap_anchor_top_right;
This. Defaultoffset= NewBmap.size (Ten, Ten);
}
Mylocation.prototype= NewBmap.control ();
MyLocation.prototype.initialize= function(map) {
varDiv=Document.createelement ("Div");
Div.appendchild (document.createTextNode ("positioning"));
//Set Style
Div.style.cursor= "Pointer";
Div.style.border= "1px solid Gray";
Div.style.backgroundColor= " White";
Div.style.padding= "10px";
Div.style.borderRadius= "5px";
Div.onclick= function(e) {
vargeolocation= Newbmap.geolocation ();
Geolocation.getcurrentposition (function(R) {
if( This. GetStatus ()==bmap_status_success) {
varMk= NewBmap.marker (R.point);
Map.addoverlay (MK);
Map.panto (R.point);
Gc.getlocation (R.point,function(RS) {
varscontent= "your location is:</br>" +rs.address;
varInfowindow= NewBmap.infowindow (scontent, {width: Max, offset:NewBmap.size (0,- -)});
Map.openinfowindow (Infowindow, r.point);
});
}
Else {
Alert ("the network is not through, please try again later. ");
}
})
}
Map.getcontainer (). appendchild (Div);
returnDiv;
}
varmylocation= Newmylocation (); //positioning
Map.addcontrol (mylocation);
varGC= NewBmap.geocoder (); //Address Resolution
</Script>
<Scripttype= "Text/javascript">
var_bdhmprotocol= (("https:" ==document.location.protocol)? "https://" : "/ http");
document.write (Unescape ("%3cscript src= '" +_bdhmprotocol+ "hm.baidu.com/h.js%3fc20b7442b4e0e7b9e42e799fae5f60bd ' type= ' text/javascript '%3e%3c/script%3e"));
</Script>
</HTML>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
