Simple use of Baidu map-html js and Baidu map htmljs
I. Introduction
Baidu map JavaScript API is an application interface written in JavaScript language. It helps you build map applications with rich functions and strong interactivity on your website, it includes various interfaces for creating basic map functions and provides data services such as local search and route planning.
Basic map function:Display (2D, 3D, and satellite images supported), translation, scaling, and drag/drop.
Map control display function:You can add or delete eagleeye, toolbar, scale, custom copyright, map type, and positioning controls on a map, and set the display position of various controls.
Covering function:Allows you to add/Delete points, lines, surfaces, hot zones, administrative divisions, and custom covers on a map; the open-source Library provides functions such as rich annotation, annotation manager, aggregation marker, and custom overlay.
Tool functions:Supports interchange between longitude and latitude coordinates and screen coordinates. The open-source Library provides functions such as ranging, geometric operations, and conversion of GPS coordinates to Baidu coordinates.
Positioning function:Supports IP location and browser (supports html5 browsers) location.
Right-click menu:You can add a shortcut menu to a map.
Mouse Interaction:Allows you to dynamically modify mouse styles, drag and drop the mouse, scale the map, and draw the mouse.
Layer function:Allows you to reset the basemap, add a real-time traffic layer, or customize a layer on a map.
Local Search:POI search based on the city, rectangular range, circular range, and other conditions, and supports searching users' own data.
Bus search:You can search for the starting point coordinates, starting point names, and LocalSearchPoi instances. You can search for convenient, transfer-able, walking-less, and no subway.
Driving car search:You can search for the starting point coordinate, starting point name, And LocalSearchPoi search conditions. The shortest time, shortest distance, and high-speed driving navigation results are returned. The taxi fare calculation service is also provided.
Walking Navigation:Provides a walking navigation solution.
Reverse/geocode:Supports conversion between Baidu coordinates and address descriptions.
Personalized data display function:After your own data is stored in LBS. Cloud, The JavaScript API can display your own data in a twist graph.
II. Introduction of maps
Create a map and use Tiananmen as the center of the map :(The key must be obtained by yourself.For details about how to obtain the key, see: http://www.cnblogs.com/0201zcr/p/4675028.html)
<! DOCTYPE html>
The roles of each part are described as follows:
Preparation page
According to the HTML standard, each HTML document should declare the correct document type. We recommend that you use the latest HTML-compliant Document declaration:
<!DOCTYPE html>
Next we will add a meta tag so that your page can be better displayed on the mobile platform.
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
Then we set the style to fill the map with 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 FileUse the reference method of V1.4 and earlier versions:
Creating a map container element map requires an HTML element as a container to be displayed on the page. Here we create a div element.
The namespace API uses BMap as the namespace. All classes are under the namespace, such as BMap. Map, BMap. Control, and BMap. Overlay.
Create a map instance
var map = new BMap.Map("container");
The Map class located in the BMap namespace represents a Map. You can create a Map instance using the new operator. The parameter can be an element id or an element object.
Make sure that the container element has been added to the map when calling this constructor.
Create coordinate points
var point = new BMap.Point(116.404, 39.915);
Here we use the Point class in the BMap namespace to create a coordinate Point. The Point class describes a geographic coordinate Point, where 116.404 represents the longitude and 39.915 represents the latitude.
Map Initialization
map.centerAndZoom(point, 15);After creating a Map instance, we need to initialize it. The BMap. Map. centerAndZoom () method requires that the coordinates of the center and the Map level be set. The map must be initialized before other operations can be performed.
Map configuration and operationsAfter the map is instantiated and initialized, you can interact with it. The appearance and behavior of the map object in the API are very similar to that of the map on the Baidu MAP website. It supports interactive functions such as dragging the mouse, scaling the scroll wheel, and double-clicking and amplifying. You can also modify configurations to change these functions. For example, by default, the map does not support the scroll wheel scaling operation, because this may affect the user experience of the entire page, but if you want to use the scroll wheel to control the scaling in the map, you can call map. enableScrollWheelZoom method. Configuration options can be found in the configuration method section referenced by the Map class.
In addition, you can interact with maps through programming. The Map class provides several methods to modify the Map status. For example, setCenter (), panTo (), zoomTo (), and so on.
The following example shows a map, which will be moved to the new center after two seconds. The panTo () method allows the map to move smoothly to the new center. If the movement distance exceeds the size of the current map area, the map will jump directly to this point.
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);
III,
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
