Simple use of Baidu Maps --html js_html/css_WEB-ITnose-HTML Tutorial-php.cn

Simple use of Baidu Maps --html js_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:40:07

Original

1121 people have browsed it

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>

Copy after login

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>

Copy after login

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" />

Copy after login

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>

Copy after login

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");

Copy after login

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);

Copy after login

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);

Copy after login

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);

Copy after login

三、效果图