百度地图进行定位
相信大家对于百度地图或者高德地图并不陌生了，大多数人日常生活每天都在用。不仅仅只是导航功能，手机定位功能越来越普遍，每一个app软件都带有定位功能，随时切换城市。在我们的app中的GPS定位其实就是调用了百度地图或者高德地图的接口。在程序上能够使用百度地图其实很简单，只需要调百度地图的js,<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>剩下的部分只是后台写好接口，传入此刻你所在的坐标点给页面，去获取你当时所在地图上的位置。这边还涉及到一个问题就是实时更新你此刻所在地图上的点位，页面采用ajax技术，局部刷新页面，不断的调用后台去动态的展示你所在地图上的点位。。废话不多说，先看效果吧！！！
先看这样一个简单的例子吧
输入阜宁两个字，点击查找，效果瞬间这样了
1.png
还可以点击卫星，效果这样
2.png
代码如下:
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>百度地图</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
</head>
<body>
<input type="text" id="cityName" value="福州"/>
<input type="button" onclick="setCity()" value="查找" />
<div id="container" style="width:1024px;height:600px;"></div>
<script type="text/javascript">
var map = new BMap.Map("container");
//在container容器中创建一个地图,参数container为div的id属性;
var point = new BMap.Point(120.2,30.25);
//创建点坐标
map.centerAndZoom(point, 14);
//初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom();
//激活滚轮调整大小功能
map.addControl(new BMap.NavigationControl());
//添加控件：缩放地图的控件，默认在左上角；
map.addControl(new BMap.MapTypeControl());
//添加控件：地图类型控件，默认在右上方；
map.addControl(new BMap.ScaleControl());
//添加控件：地图显示比例的控件，默认在左下方；
map.addControl(new BMap.OverviewMapControl()); //添加控件：地图的缩略图的控件，默认在右下方； TrafficControl
var search = new BMap.LocalSearch("中国", {
onSearchComplete: function(result){
if (search.getStatus() == BMAP_STATUS_SUCCESS){
var res = result.getPoi(0);
var point = res.point;
map.centerAndZoom(point, 11);
}
},renderOptions: { //结果呈现设置，
map: map,
autoViewport: true,
selectFirstResult: true
} ,onInfoHtmlSet:function(poi,html){//标注气泡内容创建后的回调函数，有了这个，可以简单的改一下返回的html内容了。
// alert(html.innerHTML)
}//这一段可以不要，只不过是为学习更深层次应用而加入的。
});
function setCity(){
search.search(document.getElementById("cityName").value);
}
search.search(document.getElementById("cityName").value);
</script>
</body>
</html>
- 原理其实就是简单的定位，只不过没有通过后台去操作，单纯的前台页面调用百度地图的js去实现，只是静态的定位。输入你想去的地点，点击查找，自动找到点位（所有的app上的地图，都是直接调用封装好的js,不会有人再去写，你也写不出来）。
那么在我们日常生活中，常用的滴滴打车可以看到车子距离你的位置，而且车子开过来时，地图上有个小车不停地在靠近你。其实很简单，手机先获取到你此刻的坐标，这是去地图中查到的所在的点位标记出来，此时就类似于上面例子的查找，只不过我们上面是根据名称查找，而app定位是根据坐标去精确的查找到你所在的点。找到你所在点后，再找到接单车子所在的点坐标，同样的原理，通过坐标定位到所在地图上的点，后台时刻运行，调用接口，时刻获取动态的车子坐标，此刻不停地查找新坐标所在的点位，显示在地图上，同时清除前面一个点坐标。。。代码过程中遇到的问题很多，时间问题，这边不通过后台展示代码问题。。
还有个问题就是，现在钉钉上下班点考勤，不在地图范围内则无法点上班或下班。其实这里就是事先设置好四个点位坐标，在地图上就出现一个矩形的区域，后台加上逻辑判断，不在这四个点位之间，则没有点击上班或下班的功能。
网友评论