Home > Web Front-end > HTML Tutorial > First contact with Baidu Map API_html/css_WEB-ITnose

First contact with Baidu Map API_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:47:59
Original
1297 people have browsed it

Due to the needs of the project, I came into contact with Baidu API for the first time.

Step 1: Reference the script of Baidu Map API

If you are in a LAN environment, you need to download both the map file and the js file

 

<script type="text/javascript"  src="http://api.map.baidu.com/api?key=*****************&v=1.0&services=false"></script>
Copy after login

This requires you to apply for a KEY at the Baidu Developer Center

Step 2: Create a you Place the map in a div with a random name

<div style="width: 520px; height: 340px; border: 1px solid gray" id="container"></div>
Copy after login

Step 3: Use Baidu Map API to build the map

//初始化地图,把地图放在第二步的div中var map = new BMap.Map("container");//依据经纬度,确定一个点var point = new BMap.Point(116.404, 39.915); //地图中心就是这个点,并且规定地图的放大级数是15map.centerAndZoom(point, 15);  //界面2s后中心移动到一个新点 window.setTimeout(function(){   map.panTo(new BMap.Point(116.409, 39.918));}, 2000);//加载一些界面上的控件:缩放控件、比例尺控件、全局控件map.addControl(new BMap.NavigationControl());map.addControl(new BMap.ScaleControl());map.addControl(new BMap.OverviewMapControl());//在一个点上加一个标识var marker = new BMap.Marker(point);map.addOverlay(marker); 
Copy after login

Step 4: Connect to the Internet and open it with a browser

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template