Baidu map web design

1. Baidu map api

1. Baidu Search - Baidu Maps API

Enter - Open Platform - Development Documentation - JavaScript API

 

The first is the GL version, which is a three-dimensional effect. We generally use two-dimensional, select the v3.0 version below 

 2. Development Guide - Account Registration

Just follow the prompts to apply for a key.

2. Map use

1. Apply for a key

Fill in a series of information, log in with Baidu, scan your face for real-name authentication, etc.

 

 Go to the Get Service Key page

Apply for a key after submitting: keep copying the key

 

 2. Use the display map

 2.1 Import the JS file of the map

2.2 Create a container

 

2.3 Insert map

 

<body>
		<div id="container" style="width: 1200px;height: 400px;"></div> 
		
		<script>
			//1创建地图实例
			var map = new BMapGL.Map("container");
			//2设置经纬度中心点坐标
			var point = new BMapGL.Point(116.404, 39.915);
			//3地图初始化,同时设置地图展示级别,放大多少倍
			map.centerAndZoom(point, 10); 
		</script>
		
</body>

So far, it's easy to see the effect.

Bilibili Learning Video: Learn to Call Baidu Maps API in Two Hours_哔哩哔哩_bilibili

Guess you like

Origin blog.csdn.net/m0_63172128/article/details/130779456