javascript call Baidu map api

    Baidu Map provides various client calling methods such as sdk, javascript api, etc. It is commonly used on web pages, that is, javascript api. Here is a brief introduction to how to quickly use javascript to call Baidu map api according to your own use. Using Baidu map api, unlike other front-end frameworks, we can get a js library file on the official website, and then add it to the page by <script src = "path / to / lib.js"> </ script> The use of Baidu map api requires us to register as a developer, and then obtain something similar to the private key, and then use it on the page. Without the private key, we cannot call the map api.

    1. First need to register Baidu developer: http://lbsyun.baidu.com/apiconsole/key

    2. Create your own application and generate ak.

    3. Prepare the page, introduce the Baidu map api script on the page and add the ak parameter from the previous step.

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title>map</title>
		<style>
			html,body{height:100%;width:100%;padding:0;margin:0;}
			#root{height:100%;}
		</style>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=YcP5EukTHUoFR3oObxdfBHTfA3EUgHET"></script>
	</head>
	<body>
		<div id="root"></div>
		<script type="text/javascript">
			var map = new BMap.Map("root");
			map.centerAndZoom(new BMap.Point(116.404,39.915),15)
			map.enableScrollWheelZoom()
		</script>
	</body>
</html>

    Open the browser and visit the page to get the following result:

     

    This example only briefly introduces how to use Baidu map api to get a map. In practice, we need to use the map in combination with our own business, which will add a lot of markers and layers to make the map show more rich elements. Make the map a tool, not just show a graph.

Published 529 original articles · praised 287 · 1.47 million views

Guess you like

Origin blog.csdn.net/feinifi/article/details/104026042