前言
随着移动互联网的急速发展，对位置服务的需求越来越强烈，如美团、滴滴、共享单车等等一系列的互联网应用都是基于位置提供服务的。国内两大地图提供商百度地图、高德地图不仅仅在导航等应用提供基础的服务，还对外提供一些开放的位置服务的API，开发者可以利用这些第三方的API快速构建自己的位置服务应用。
初识百度地图API
基于百度地图位置服务开发应用，首先应当先到百度地图开放平台注册开发者账号，然后创建应用授权，如果是用来开发学习的，这些授权是免费的。以下是百度地图开放的一些特性：
地图展示
控件添加（放大缩小lidebar）
地图标注
地名关键字检索
出行路线规划
全景图展现
定位
工具测量
扫描二维码关注公众号，回复：
4807320 查看本文章
API运用样例
运行效果页面 https://dosthing.github.io/imagic/baidumap/map.html
样例源码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin:0;
font-family:"微软雅黑";
}
#nav{
width: 100%;
height: 60px;
background: url(./mapnav.png);
background-size: cover;
}
#mapsearch{
width: 100%;
height: 60px;
background:rgba(242,242,242,0.1);
border-radius: 15px;
float:top;
}
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=eakY1xIF0A4bFdvIgaSA5EmvyDQDuuXl"></script>
<title>Warm heart map</title>
</head>
<body>
<div id="nav">
<div id="mapsearch">
<div style="font-size: 16px; padding-top: 8px; padding-left: 15px; color: #FF3030;">热搜词：
<a href="#" onclick="hotcityclick(this)" style="text-decoration:none; margin-left: 5px;">天安门</a>
<a href="#" onclick="hotcityclick(this)" style="text-decoration:none; margin-left: 5px;">桂林山水</a>
<a href="#" onclick="hotcityclick(this)" style="text-decoration:none; margin-left: 5px;">天涯海角</a>
<a href="#" onclick="hotcityclick(this)" style="text-decoration:none; margin-left: 5px;">世界之窗</a>
<a href="#" onclick="hotcityclick(this)" style="text-decoration:none; margin-left: 5px;">希尔顿酒店</a>
<a href="#" onclick="hotcityclick(this)" style="text-decoration:none; margin-left: 5px;">KTV</a>
<a href="#" onclick="hotcityclick(this)" style="text-decoration:none; margin-left: 5px;">美食街</a>
<a href="#" onclick="hotcityclick(this)" style="text-decoration:none; margin-left: 5px;">景点</a>
<input type="text" id ="searchinput" name="weatherinput" placeholder="请输入要查询的地名或景点，如：广州塔" style="width:400px; height:32px;background:rgba(242,242,242,0.5); margin-left:120px; font-size: 16px;color: #330000;"></input>
<button id="searchbtn" onmouseover="mouseon(this)" style="width:80px; height:32px; background: #CFE2F3; font-size: 16px;">Search</button>
</div>
</div>
</div>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(113.204, 23.215), 11); // 初始化地图,设置中心点坐标和地图级别
//添加地图类型控件
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
map.setCurrentCity("广州"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
var local = new BMap.LocalSearch(map, {
renderOptions:{map: map}
});
function hotcityclick(obj){
var hotsearch = obj.innerHTML;
local.search(hotsearch);
}
searchbtn.onclick = function(){
var searchplace = document.getElementById('searchinput').value;
if(searchplace != ""){
local.search(searchplace);
}
}
</script>
总结
在互联网高度发达的今天，很难有巨头能够容纳如此大体量的市场，对市场细分越来越重要，正如此www原则（who I am，what I do，where I go）已成为互联网公司吾日三省吾身的问题一样，每个公司每个人都有自己的角色定位。专注自身的研发，合理引用第三方的支持已经成为产品快速开发的主流，本文用于记录利用百度地图提供的API做一个小小demo应用，2018-冬至时分于广州。