1. Introduction
Baidu Map JavaScript API is a set of application programming interfaces written in JavaScript language, which can help you build feature-rich websites , a highly interactive map application that includes various interfaces to build basic map functions and provides data services such as local search and route planning.
Basic map functions: Display (supports 2D images, 3D images, satellite images), pan, zoom, drag, etc.
Map control display function: You can add/delete eagle eye, toolbar, scale, custom copyright, map type and positioning controls on the map, and you can set the display of various controls Location.
Cover function: Supports adding/deleting points, lines, areas, hot areas, administrative divisions, user-defined covers, etc. on the map; the open source library provides rich annotation and annotation management function such as markers, aggregation markers, and custom overlays.
Tool functions: Provides functions for converting latitude and longitude coordinates and screen coordinates; the open source library provides functions such as ranging, geometric operations, and converting GPS coordinates/National Bureau of Surveying coordinates to Baidu coordinates.
Positioning function: Supports IP positioning and browser (supports html5 feature browser) positioning function.
Right-click menu function: Supports adding a right-click menu on the map.
Mouse interaction function: Supports functions such as dynamic modification of mouse style, mouse dragging/zooming of maps, and mouse drawing.
Layer function: Supports resetting the map base map, overlaying real-time traffic layers on the map or customizing layer functions.
Local search function: Includes POI search based on city, rectangular range, circular range and other conditions; and supports retrieval of user-owned data.
Public transportation search: Supports three search conditions: starting point coordinates, starting point name, and LocalSearchPoi instance; the search results support four types: convenient, transferable, less walking, and not taking the subway. plan.
Driving search: Supports retrieval of three search conditions: starting point coordinates, starting point name, and LocalSearchPoi instance; returns driving navigation results with the shortest time, shortest distance, and avoiding highways; and provides Taxi fare calculation service.
Walking Navigation: Provides walking navigation solutions.
Reverse/Geocoding: Supports conversion service between Baidu coordinates and address description information.
Personalized data display function: After the user’s own data is stored in the LBS. cloud, the JavaScript API can provide the function of displaying the own data in the form of pockmark diagrams.
2. Introduction of the map
A map was created with Tiananmen as the center of the map: (You have to get the secret key yourself , the secret key is To obtain the key, please refer to: http://www.cnblogs.com/0201zcr/p/4675028.html)
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hello, World</title> <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=您的密钥">//v1.5版本的引用方式：src="http://api.map.baidu.com/api?v=1.5&ak=您的密钥"//v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"</script></head> <body> <div id="container"></div> <script type="text/javascript"> var map = new BMap.Map("container"); // 创建地图实例 var point = new BMap.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别 </script> </body> </html>
Analyze the role of each part:
Preparation page
According to the HTML standard, every HTML document should declare the correct document type. We recommend that you use the latest document declaration that complies with the HTML5 specification:
<!DOCTYPE html>
Next we add a meta tag to make your page better displayed on mobile platforms.
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
Then we set the style so that the map fills the entire browser window:
<style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style>
Reference Baidu Map API file Use the reference method of V1.4 and previous versions:
Create a map container element map An HTML element is required as a container so that it can be displayed on the page. Here we have created a div element.
The namespace API uses BMap as the namespace, and all classes are under this namespace, such as: BMap.Map, BMap.Control, BMap.Overlay.
Create a map instance
var map = new BMap.Map("container");
Map class located in the BMap namespace Represents a map, and a map instance can be created through the new operator. Its parameter can be an element id or an element object.
Note that when calling this constructor, you should ensure that the container element has been added to the map.
Create point coordinates
var point = new BMap.Point(116.404, 39.915);
Here we use the BMap namespace Point class to create a coordinate point. The Point class describes a geographical coordinate point, where 116.404 represents longitude and 39.915 represents latitude.
Map initialization
map.centerAndZoom(point, 15);
After creating the map instance, we need to initialize it, BMap.Map.centerAndZoom() method It is required to set the center point coordinates and map level. The map must be initialized before other operations can be performed.
地图配置与操作
地图被实例化并完成初始化以后，就可以与其进行交互了。API中的地图对象的外观与行为与百度地图网站上交互的地图非常相似。它支持鼠标拖拽、滚轮缩放、双击放大等交互功能。您也可以修改配置来改变这些功能。 比如，默认情况下地图不支持鼠标滚轮缩放操作，因为这样可能会影响整个页面的用户体验，但是如果您希望在地图中使用鼠标滚轮控制缩放，则可以调用map.enableScrollWheelZoom方法来开启。配置选项可以在Map类参考的配置方法一节中找到。
此外，您还可以通过编程的方式与地图交互。Map类提供了若干修改地图状态的方法。例如：setCenter()、panTo()、zoomTo()等等。
下面示例显示一个地图，等待两秒钟后，它会移动到新中心点。panTo()方法将让地图平滑移动至新中心点，如果移动距离超过了当前地图区域大小，则地图会直跳到该点。
var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); window.setTimeout(function(){ map.panTo(new BMap.Point(116.409, 39.918)); }, 2000);
三、效果图
The Future of HTML: Evolution and Trends in Web DesignApr 17, 2025 am 12:12 AMThe future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.
HTML vs. CSS vs. JavaScript: A Comparative OverviewApr 16, 2025 am 12:04 AMThe roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.
HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AMHTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.
HTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AMHTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.
From Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AMHTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.
Understanding HTML, CSS, and JavaScript: A Beginner's GuideApr 12, 2025 am 12:02 AMWebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
The Role of HTML: Structuring Web ContentApr 11, 2025 am 12:12 AMThe role of HTML is to define the structure and content of a web page through tags and attributes. 1. HTML organizes content through tags such as , making it easy to read and understand. 2. Use semantic tags such as, etc. to enhance accessibility and SEO. 3. Optimizing HTML code can improve web page loading speed and user experience.
HTML and Code: A Closer Look at the TerminologyApr 10, 2025 am 09:28 AMHTMLisaspecifictypeofcodefocusedonstructuringwebcontent,while"code"broadlyincludeslanguageslikeJavaScriptandPythonforfunctionality.1)HTMLdefineswebpagestructureusingtags.2)"Code"encompassesawiderrangeoflanguagesforlogicandinteract
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
SublimeText3 Chinese version
Chinese version, very easy to use
SublimeText3 Linux new version
SublimeText3 Linux latest version
Zend Studio 13.0.1
Powerful PHP integrated development environment
