一、百度API简介
前言:随着互联网行业的快速发展,人们对定位服务的需求日益增强,例如:美团、快递、滴滴、共享单车等服务行业。
Web服务API:
百度地图Web服务API为开发者提供http/https接口,即开发者通过http/https形式发起检索请求,获取返回json或xml格式的检索数据。用户可以基于此开发JavaScript、C#、C++、Java等语言的地图应用。
二、百度API的使用步骤
1、打开百度APP网址,登录百度账号
2、获取 密钥
3、看开发文档,熟悉APP的使用,进行一些简单的操作
三、案例
下面是一个简单的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title></title>
<!-- 引用百度地图API文件 -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1Fwa2wYC1OfSBCiSUtFwQ344WOyGCiH9"></script>
<style type="text/css">
html{
height:100%;
}
body{
height:100%;
margin:0;
padding:0;
}
#container{
width: 800px;
height: 100%;
}
</style>
</head>
<body>
<!-- 创建地图容器元素 -->
<div id="container"></div>
<script type="text/javascript">
// 创建地图实例
var map = new BMap.Map("container");
// 设置中心点坐标 113°41′-115°05′、北纬29°58′-31°22
var point = new BMap.Point(113.410792,29.477711);
// 地图初始化 同时设置地图展示级别
map.centerAndZoom(point, 18);
// 平移缩放控件
map.addControl(new BMap.NavigationControl());
// 缩略地图
map.addControl(new BMap.OverviewMapControl());
//全景控件
var stCtrl = new BMap.PanoramaControl();
stCtrl.setOffset(new BMap.Size(20, 20));
map.addControl(stCtrl);
// 创建标注
var marker = new BMap.Marker(point);
// 将标注添加到地图中
map.addOverlay(marker);
var message = {
title: '大武汉欢迎你!!!'
}
marker.addEventListener("click", function(){
var div = document.createElement('div');
var p = document.createElement('p');
p.innerHTML = '武汉地处江汉平原东部、长江中游,长江及其最大支流汉江在城中交汇,形成武汉三镇(武昌、汉口、汉阳)隔江鼎立的格局,市内江河纵横、湖港交织,水域面积占全市总面积四分之一。作为中国经济地理中心,武汉素有“九省通衢”之称,是中国内陆最大的水陆空交通枢纽和长江中游航运中心,其高铁网辐射大半个中国,是华中地区唯一可直航全球五大洲的城市。';
div.appendChild(p);
// 添加信息窗口
var windowInfo = new BMap.InfoWindow(div, message);
// 显示信息窗口
map.openInfoWindow(windowInfo, marker.getPosition());
});
</script>
</body>
</html>
效果图如下: