Baidu Map JavaScript API Rapid development experience

Source: Internet
Author: User

A while ago Baidu Map API launched the JavaScript API Speed 1.0 Simple look, from the product positioning is very good. Divide the developer into ordinary Web developers and mobile Web developers. Just use the cell phone map this decision to try. First look at the Baidu map of the official definition of it.

Respecting Labor Success please keep the original address: http://blog.csdn.net/lbsnews/article/details/29368879

This set of Baidu Map API is designed for mobile phone browser provides the API, you can use the set of APIs, on the mobile phone page to display the map, label location, search poi, query lines and so on.
Characteristics:

    1. Compared to the same time-compatible PC and mobile browser JavaScript API Volkswagen Edition, the version is more suitable for mobile devices, smaller size, loading maps faster, more save traffic;
    2. The static diagram API, which can be used to load dynamic maps and map operations, such as drag-and-drop, zoom, retrieve, line planning, etc., to better meet the rich needs of the user on the map.
    3. Applicable mobile browser type: Android comes with, UC, Baidu, QQ and other mainstream browser.
I was looking at the dome and development documentation, summarizing the time to read this descriptive narrative. It's a very lightweight SDK. Don't use the VW version of the standard to ask for it. Baidu Map This do subtraction work is very targeted. Suppose you want to go out first Holle world can look at the official Baidu map entry document. If you have done Baidu map of the development of the Volkswagen version, please continue down.
first, the speed version of the VW version number when creating a map difference
    1. Definition of HTML5: <! DOCTYPE html>
    2. Definition of responsive design:<meta name= "viewport" content= "initial-scale=1.0, User-scalable=no"/>
    3. Speed version number type definition: http://api.map.baidu.com/api? Type=quick&ak ...
Ii. interface Differences in the development process
    1. Interface: With a very large number of interfaces, the code for the VW version cannot be used directly on the fast version. You are prompted that the object does not have a method defined. The most obvious is that there is no lable object. can only join Mark. The original definition of complex annotations in this is not possible, only by adding pop-up form to enrich the labeling information. The mobile-only touch event also retains only two cases.
    2. Efficiency: And the VW version number is not a level. Given that it is carried out on a mobile phone, the number of dimensions to be drawn must be tightly controlled. More than 50 mark in the phone form will start to affect the normal zoom-in and zoom-out operation, as well as Dayton. Maybe my cell phone (M2) is worse.
    3. BUG: I strongly questioned the V1.0 version of the test, and the problem I encountered was not a mistake in any nook or cranny. One Zoomend event response two times. and Infowindows (pop-up form) can only specify a mark instance, saying that more than one mark cannot correspond to multiple infowindows. Try a lot of ways not solved, only can create their own new objects to store information than the corresponding relationship. The pop-up infowindows form is also often turned off on the phone. Not much to say on those several interfaces who use who know.
third, the completion of the contentmade a fast version of the prototype, dealing with the above mentioned several bugs, optimized Mark's drawing, for the development of fast version of the friends will be some help.
    1. Use the lbs cloud provided by Baidu as a management tool for POI points. Use the JavaScript API Speed SDK for client development.
    2. Troubleshoot information Form pop-up error: There is only one last pop-up form that appears during the loop to add infowindows Show.
    3. optimized form callout loading brush screen problem: During the map panning process, The new request data is compared with the existing coordinate point data on the map, and the inference is drawn or deleted. Clear redraw with the map as the map zooms in or out.
    4. controls the number of labels drawn in the body: the mechanism of the stack during drawing to control the drawing order process of the callout. You can define the stack size yourself.
    5. resolve the form Zoomend event was triggered two times.
    6. Through the self-built object store need to pop up info form information, use coordinates than the other side to find the corresponding information.
    7. positioning via the IP location interface provided by Baidu. (very not allowed)
the classmate who wants the code, please copy the Topspeedmap.js file by debugging the form . It's all in there. No encryption, please keep the author information. If you can't find the script file, leave a mailbox, I'll send you a copy of the latest update version number When I think about it .
Scan your mobile code to see the test
Online interview address:http://rivers.duapp.com/ Note: The method provided in the Baidu map document is obsolete. To preview please refer to my following steps.






Baidu Map JavaScript API Rapid development experience

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.