How to display a map on a web page using JS and Baidu Maps-JS Tutorial-php.cn

How to display a map on a web page using JS and Baidu Maps

PHPz

Release： 2023-11-21 13:16:30

Original

1320 people have browsed it

How to display a map on a web page using JS and Baidu Maps

How to use JS and Baidu Maps to display a map on a web page requires specific code examples

With the development of mobile Internet and Web2.0 technology, maps have become a user One of the most interesting features. In web applications, it is often necessary to use maps to display various information. Whether it is a map navigation application or a map data visualization application, it is necessary to use a map plug-in for development. This article will take Baidu Map as an example to introduce how to use JS and Baidu Map to display maps on web pages, including basic map operations and implementation of common functions.

1. Introduction of Baidu Map API Library

Before using Baidu Map, you need to introduce Baidu Map API Library. Add the following code in the

tag:

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的百度地图AK"></script>

Copy after login

Here "your Baidu Map AK" needs to be replaced with the Baidu Map AK (i.e. access key) you applied for. You can log in to the Baidu Map Open Platform to apply. . After the application is completed, AK can be found in the "Management Console" of the Baidu Map Open Platform.

2. Create a map container

Add a

tag to host the map in the HTML document:

<div id="map"></div>

Copy after login

Set the style of the map container in the CSS file ：

#map {
  width: 800px;
  height: 500px;
}

Copy after login

3. Initialize the map object

Create a map object in the JS file and specify its default zoom level and center point location. The code is as follows:

var map = new BMap.Map("map");
var point = new BMap.Point(116.404, 39.915); //中心点位置
map.centerAndZoom(point, 12); //设置地图中心点和默认的缩放级别

Copy after login

The BMap here is an object provided by Baidu Map API, through which maps and various map functional components can be created.

4. Add map controls

Add some commonly used controls on Baidu Map, such as zoom controls, map type controls, eagle eye controls, etc. The code is as follows:

map.addControl(new BMap.NavigationControl()); //添加平移缩放控件
map.addControl(new BMap.ScaleControl()); //添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加鹰眼控件
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件

Copy after login

5. Add overlays and labels

Adding custom overlays and labels on the map can be achieved through the related objects of BMap. For example, add a custom annotation:

var marker = new BMap.Marker(point); //创建一个标注
map.addOverlay(marker); //将标注添加到地图中

Copy after login

6. Bind map events

When using a map, you often need to bind some events to respond to user operations. For example, when the user clicks on the map, a label is added to the map. The code is as follows:

map.addEventListener("click", function(e) {
  var marker = new BMap.Marker(e.point); //创建一个标注
  map.addOverlay(marker); //将标注添加到地图中
});

Copy after login

7. Geocoding and reverse geocoding

Geocoding and reverse geocoding are important functions in the map API. Geocoding is the process of converting textual addresses into geographical coordinates, while reverse geocoding is the process of converting geographical coordinates into textual addresses. The code example is as follows:

//地理编码
var geocoder = new BMap.Geocoder();
geocoder.getPoint("北京市海淀区中关村", function(point) {
  //在地图上添加一个标注
  var marker = new BMap.Marker(point);
  map.addOverlay(marker);
}, "北京市");

//逆地理编码
var geoc = new BMap.Geocoder();
geoc.getLocation(point, function(rs) {
  var addComp = rs.addressComponents;
  alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street);
});

Copy after login

The above is the basic process and common function implementation of using JS and Baidu Maps to display maps on a web page. Through these code examples, I believe readers can quickly master the use of Baidu Map API, and then develop richer and more practical map applications.

The above is the detailed content of How to display a map on a web page using JS and Baidu Maps. For more information, please follow other related articles on the PHP Chinese website!