如何调用百度地图API实现手机自动定位
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何调用百度地图API实现手机自动定位相关的知识，希望对你有一定的参考价值。
<!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 width: 100%;height: 100%; margin:0;font-family:"微软雅黑";
#l-mapheight: 220px;width:100%;
#r-result,#r-result tablewidth:100%;
.nav width: 100%; height: 2em; line-height: 2em; background: #EDEDED; border: 1px solid #ADADAD;
.nav .nav-inner width: 30%; margin-left: 35%;
.nav .nav-sub float: left; width: 33%;
.nav .nav-sub a text-decoration: none;
.nav .nav-sub a i display: inline-block; background: url("http://webmap1.map.bdstatic.com/wolfman/static/common/images/ui3/mo_banner_ba37b5d.png")
.nav .nav-sub a.bus i background-position: -1px -192px; position: relative; top: 2px; width: 13px; height: 16px;
.nav .nav-sub a.driver i background-position: -29px -194px; width: 15px; height: 14px;
.nav .nav-sub a.walk i background-position: -102px -189px; width: 16px; height: 18px;
.nav .nav-sub a.bus.cur i background-position: -15px -192px;
.nav .nav-sub a.driver.cur i background-position: -45px -194px;
.nav .nav-sub a.walk.cur i background-position: -120px -189px;
.hide display: none;
input font-family: "micrsoft yahei"; width: 80%; height: 2em; font-size: 1em; line-height: 2em; border: 0px; outline: 0px; padding: .2em 1em; margin: 0em 10%;
.btn-group width: 100%; border-top: 1px solid #DDD; border-bottom: 2px solid #DDD;
button width: 32%; text-align: center; border: 0; border-radius: 0; background-color: inherit; height: 44px; line-height: 44px; font-size: 15px;
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=FbzOyQ4YujPrZsxiQKoB07aB"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>
<title>导航示例</title>
</head>
<body>
<div id="search">
<input type="text" id="start" placeholder="正在定位您的位置..." style="border-bottom: 1px solid #DDD; " />
<input type="text" id="end" value="汽车西站-公交车站" readonly="true" />
<input type="hidden" id="start_point" value=""/>
<input type="hidden" id="end_point" value="112.918571,28.214124"/>
<input type="hidden" id="start_location" value=""/>
<div class="btn-group">
<button id="bus-search">公交</button>
<button id="driver-search">驾车</button>
<button id="walk-search">步行</button>
</div>
</div>
<div id="showMap" class="hide">
<div class="nav">
<div class="nav-inner">
<div class="nav-sub"><a href="#" class="bus"><i></i></a></div>
<div class="nav-sub"><a href="#" class="driver cur"><i></i></a></div>
<div class="nav-sub"><a href="#" class="walk"><i></i></a></div>
</div>
<!-- <a href="javascript:;" id="reLocation">重新导航</a> -->
</div>
<div id="l-map"></div>
<div id="r-result"></div>
</div>
<script type="text/javascript">
$(function()
var ep = $("#end_point").val().split(",");
var map = new BMap.Map("l-map");
var point = new BMap.Point(ep[0], ep[1]);
map.centerAndZoom(point, 16);
// 定位对象
var geoc = new BMap.Geocoder();
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r)
if(this.getStatus() == BMAP_STATUS_SUCCESS)
//var mk = new BMap.Marker(r.point);
//map.addOverlay(mk);
//map.panTo(r.point);
$("#start_point").val(r.point.lng+','+r.point.lat);
setLocation(r.point);
showMap();
else
$("#start").attr("placeholder","请输入您的当前位置")
alert('无法定位到您的当前位置，导航失败，请手动输入您的当前位置！'+this.getStatus());
,enableHighAccuracy: true);
$(".nav .nav-sub a").click(function()
$(".nav .nav-sub a").removeClass('cur');
$(this).addClass('cur');
searchRoute();
)
$("#reLocation").click(function()
reLocation();
);
$("#bus-search,#driver-search,#walk-search").click(function()
var id = $(this).attr("id");
$(".nav .nav-sub a").removeClass('cur');
if(id == "bus-search")
$(".nav .nav-sub a.bus").addClass('cur');
else if(id == "driver-search")
$(".nav .nav-sub a.driver").addClass('cur');
else if(id == "walk-search")
$(".nav .nav-sub a.walk").addClass('cur');
showMap();
)
function reLocation()
$("#search").show();
$("#showMap").hide();
map = new BMap.Map("l-map");
function showMap()
$("#srarch").hide();
$("#showMap").show();
searchRoute();
function setLocation(point)
geoc.getLocation(point, function(rs)
var addComp = rs.addressComponents;
var result = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
$("#start").val(result);
$("#start_location").val(result);
searchRoute();
);
function searchRoute(s_, e_)
map = new BMap.Map("l-map");
var cur = $(".nav .nav-sub a.cur");
var type = "";
if(cur.hasClass('bus'))
type = "bus";
else if(cur.hasClass('driver'))
type = "driver";
else if(cur.hasClass('walk'))
type = "walk";
else
type = "driver";
var s_;
var e_;
var sl = $("#start_location").val();
var s = $("#start").val();
var sp = $("#start_point").val();
var e = $("#end").val();
var ep = $("#end_point").val();
if(s != sl)// 如果用户修改了地址（与定位的位置不一致）则使用地址搜索
s_ = s;
e_ = e;
else if(sp)// 否则使用坐标搜索
var ps = sp.split(",");
var pe = ep.split(",");
s_ = new BMap.Point(ps[0], ps[1]);
e_ = new BMap.Point(pe[0], pe[1]);
if(type == "bus")
var transit = new BMap.TransitRoute(map, renderOptions: map: map, panel: "r-result", autoViewport: true);
transit.search(s_, e_);
else if(type == "driver")
var driving = new BMap.DrivingRoute(map, renderOptions: map: map, panel: "r-result", autoViewport: true);
driving.search(s_, e_);
else if(type == "walk")
var walking = new BMap.WalkingRoute(map, renderOptions: map: map, panel: "r-result", autoViewport: true);
walking.search(s_, e_);
)
</script>
</body>
</html> 参考技术A 实现手机自动定位，一些防护手机安全的软件都有防护功能，我用的是腾讯手机管家，手机和电脑都在用。下载量很高，你可以下下来试试。像一些有病毒或者钓鱼网址会有提醒，也可以设置直接屏蔽，平时也可以自己扫描一下手机里的软件是否安全。适用所有型号和系统的手机。保护自身信息不泄露更能保护手机安全。希望可以帮助到你！ 参考技术B 自己找人编写程序咯
网页内如何调用开放的api接口实现用户定位
参考技术A 网页内调用开放的api接口实现用户定位的步骤如下：以百度地图为例1、百度直接搜【百度地图调用】，点击出现的第二个网站，进入这个网站即可；
2、进入这个网站后，我们首先得输入自己需要定位的地点。比如我们输入【上海】这个城市，输入后点击【查找】选项；
3、经过上一步的操作，我们已经成功地定位到【上海】这个城市了。然后我们点击第二步【设置地图】；
4、在【设置地图】里面有一些关于这个地图本身显示的一些设置选项，比如可以设置地图的【尺寸大小】，地图的【添加按钮】和地图的【状态】；；
5、然后我们开始给我们的地图添加【地图标注】，点击这个【小棒子】图标，然后在我们需要标注的地方鼠点击一下，输入需要修改的名称和备注，然后点击【保存】按钮；
6、经过上面的一些操作后，我们可以看到我们自己添加的地理位置所显示出的效果了；
7、然后我们点击底部的【获取代码】，再点击【复制代码】即可；
8、在vs2012里面新建一个【html】文件，然后把我们刚刚复制过来的代码直接粘贴到里面。然后在vs2012里面选择使用【谷歌浏览器】查看这个【html】文件里面的内容；；
9、这个是在【谷歌浏览器】里面运行出来的，在本地的百度地图显示出地理位置的效果图。可以看到，我们已经成功地调用了百度地图的API接口了。
以上是关于如何调用百度地图API实现手机自动定位的主要内容，如果未能解决你的问题，请参考以下文章