First, let's talk a little nonsense:
1. For the name tonylpProgramFrom the employee's perspective, I like to write tonylp, using the camel method, but I don't know what it was for at that time. The name of the blog garden will be changed to tony_lp. If I remember correctly, this should be a naming method in C ++. You are welcome to shoot a brick, because I can't remember it.
2. I like the blog park very much. There are a lot of big cows in this place. I also like to post articles here, but I always feel that the reposted items will taste strange, therefore, I tried to write all the published content in one word. Of course, I didn't despise the reposted content.ArticlePeople, after all, through reprinting, It is very convenient for me to enjoy a good article.
3. As a newbie struggling with the Web Front-end, I hope some experts can recommend jquery, JavaScript, HTML and other books on the Web Front-end to me. Thank you very much.
Okay. Let's talk about Baidu map API development practices. During this time, a community is working on a forum project. They hope to have a map to mark new things and help information. Nowadays, location-based social activities are very popular. They also hope to apply this technology.
By using.
First, let's talk about their goals (in fact, their current needs are very unclear, and I just tried Baidu map API as an understanding, so some requirements are based on my logic ):
1. When I click the link to open this page, I want to automatically locate my current location.
2. View All markup points within the current map range
3. Click each marker and a large information window is displayed.
4. By searching, I can find a location, mark it, and write the corresponding help information (this is actually a large module, and the requirements are not clear yet)
5. The left sidebar should show all the markup points within my distance and provide relevant information.
6. There should be a hyperlink in the left information (for example, displayed in the map), and then click it to display it in the map.
7. I can set the search distance to indicate all the help information within the radius.
What I can think of now is these requirements. Then, in response to these requirements, I have corresponding programming ideas:
1. Obtain the current address: 1) obtain the rough position (Uniform latitude and longitude) through the IP address, and then initialize the map through the position
2) use ajax to obtain the stored address information from the backend (this postion is relatively random. You can record the last position or record it during user registration, I haven't thought about it yet)
2. obtain all the marked points in the current map range, request position information from the background, and mark the points one by one on the map. In this case, you need to add a mouse click listener event for each marker.
3. compare whether the tag points of the current click are the same as those of the previous click. If they are different, request data from the background, including title, content, IMG Link (for something similar to Baidu information window)
In fact, I only want to implement it here, and continue to implement it in the next day.CodeAnd, I suggest you compile it yourself. It's not very technical. You just need to look at the examples. pay more attention to your ideas.
1 <! Doctype HTML> 2 <HTML> 3 <Head>4 <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/> 5 <Title> Baidu Map </title> 6 <Style type = "text/CSS"> 7 Body, HTML, # allmap {width: 100%; Height: 100%; overflow: hidden; margin: 0 ;} 8 # L-map {Height: 100%; width: 78%; Float : Left; border- Right: 2px solid # bcbcbc ;} 9 # R-result {Height: 100%; width: 20%; Float : Left ;} 10 </Style> 11 <LINK rel = "stylesheet" href = "http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css"/> 12 <SCRIPT type = "text/JavaScript" src = "http://api.map.baidu.com/api? V = 1.4 "> </SCRIPT> 13 <SCRIPT type = "text/JavaScript" src = "http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"> </SCRIPT> 14 <SCRIPT type = "text/JavaScript" src = "jquery. js"> </SCRIPT> 15 <SCRIPT type = "text/JavaScript" src = "demo. js"> </SCRIPT>16 <SCRIPT type = "text/JavaScript"> 17 $ (Document). Ready ( Function (){ 18 Initmap (); 19 Initinfowindow (); 20 Getmark (); 21 22 }); 23 </SCRIPT> 24 </Head> 25 <Body> 26 <Div id = "allmap"> </div> 27 </Body> 28 </Html>
1 // Initialize Map 2 Function Initmap (){ 3 VaR Lng = 1, 126.657717 ; 4 VaR Lat = 1, 45.773225 ; 5 VaR Point = New Bmap. Point (LNG, Lat ); // Create coordinate points 6 /* $. Ajax ({ 7 URL: 'xxx. action', // Replace with the real action 8 Type: 'get ', 9 Async: false, 10 Datatype: 'json ', 11 Success: function (data ){ 12 Lng = data. lng; 13 Lat = data. Lat; 14 If (LNG! = NULL & lat! = NULL ){ 15 Point = new bmap. Point (LNG, Lat ); 16 } 17 } 18 }); 19 */ 20 Map = New Bmap. Map ("allmap "); // Create a map instance 21 Map. centerandzoom (point, 14 ); // Initialize the map and set the coordinates of the center and the map level. 22 Map. enablescrollwheelzoom (); // Enable scroll wheel zoom in and out 23 Map. addcontrol ( New Bmap. navigationcontrol ()); // Add the pan zoom control 24 Map. addcontrol ( New Bmap. scalecontrol ()); // Add Scale Control 25 Map. addcontrol ( New Bmap. overviewmapcontrol ()); // Add scaling map control 26 }
//Add marker pointsFunctionAddmarker (point ){VaRMarker =NewBmap. Marker (point); map. addoverlay (Marker); marker. addeventlistener ("Click ",Function(E) {getjavaswinfo (Marker. getposition ());//Obtain the location of a markerSearchinfowindow. Open (Marker );//Update infowindow Information})} 1 /* 2 Every time I click a marker, I use ajax to search the marker point in the background, 3 The title, content, and image are displayed in infowindow. 4 Steps: 5 1. Get the coordinates of marker points 6 2. Obtain infowindow information through Ajax 7 3. displayed on the page 8 How can I set the disable mode? Does the background request data every time in this mode, 9 Solution: compare the difference between the current marker and the previously obtained vertex. If the difference is the same, 10 It is not like the background request data. 11 Add info window 12 */ 13 Function Getwindowinfo (recpoint ){ 14 If (! Recpoint. Equals (prepoint )){ 15 /* 16 $. Ajax ({ 17 URL: 'xxx. action ', 18 Type: 'get ', 19 Async: false, 20 Data: 'lng = '+ recpoint. lng +' & lat = '+ recpoint. Lat, 21 Datatype: 'json ', 22 Success: function (data ){ 23 If (Data! = NULL ){ 24 VaR infocontent = data. infocontent; // you need to complete 25 VaR infotitle = data. infotitle; 26 VaR imgsrc = data. imgsrc; 27 28 VaR content = '<Div style = "margin: 0; line-Height: 20px; padding: 2px;">' + 29 ' '+ 30 + Infocontent + '</div> '; 31 Searchinfowindow. settitle (infotitle ); 32 Searchinfowindow. setcontent (content ); 33 } 34 } 35 }); 36 */ 37 Console. Log (recpoint. lng ); 38 } 39 Else { 40 // Alert ("else" + recpoint. LAT ); 41 } 42 Prepoint = Recpoint; 43 }
Okay, that's almost the case. The next article will go further ..
All of the above are personal original, please reprint the original link attached: http://www.cnblogs.com/tonylp
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
