可以实现的，HTML5可以使用手机的GPS信息，利用百度等地图的开放API就可以了。
HTML5中可以通过IP，WIFI信息，GPS，来实现地理定位，当然相关精度也是有所不同，所以如果要精确导航就得使用GPS信息。
下面是一段HTML5结合百度地图API来获取位置的代码：
<div id="allmap"></div>当前定位地址：<a id="du-gps"></a><span></span></div>
<script>
var map = new BMapMap("allmap");
var geolocation = new BMapGeolocation();
geolocationgetCurrentPosition(function(r){
if(thisgetStatus() == BMAP_STATUS_SUCCESS){
mappanTo(rpoint);
//alert('您的位置：'+rpointlng+','+rpointlat);
var pt = rpoint;
var geoc = new BMapGeocoder();
geocgetLocation(pt, function(rs){
var addComp = rsaddressComponents;
//alert(addCompprovince + ", " + addCompcity + ", " + addCompdistrict + ", " + addCompstreet + ", " + addCompstreetNumber);
$("#du-gps")text(addCompdistrict+addCompstreet+addCompstreetNumber);
});
}
else {
alert('failed'+thisgetStatus());
}
},{enableHighAccuracy: true})
</script>
方法/步骤
通过浏览器打开这个连接：>
选择当前城市，然后输入具体地址，搜索。
添加标注，展开后有三种形式，如图
默认选择第一种形式，把鼠标放入右边的地图，点击，然后会出现如下图，填写左边的选项，保存。
html5实现地图上定位导航路线方法如下：
1先通过百度拾取坐标系统获得点位的坐标。
>
2在网页的<head>中插入百度API引用脚本。
<script type="text/javascript" src=">
key=&v=11&services=true"></script>
3在网页的</body>之后</html>之前插入地图显示代码。
4设置显示地图的div的id为“dituContent”，即添加 id="dituContent"
由于jqm的div的高度都是根据内容自由放大的，所以为了地图能正常显示，还需要
增加一个高度值，一般情况600px就可以，完成。
这里介绍一种简单的方法—echarts，一个前端网页可视化库，可以快速绘制漂亮、简洁的中国地图，下面我简单介绍一下实现过程，主要内容如下：
1首先，下载echartsminjs，这个直接到ecahrts官网下载就行，如下，也就不到750k，很快就能下载成功：
2接着，下载chinajs，因为绘制的是中国地图，所以必须要单独下载这个js文件，这个可以直接到网上搜一下，很多，GitHub也有，大概60k左右，直接点击下载就行，如下：
3最后就是在html网页中编码实现绘制中国地图了，主要步骤及截图如下：
首先，我们创建一个html文件，在head标签中依次引入echartsjs和chinajs文件，在body标签中创建一个div容器，用于放置绘制的地图，代码如下：
接着，我们需要js随机生成一些测试数据，用于在绘制地图时，根据数值显示不同颜色的地区，代码如下，这里放在body标签里就行：
然后，就是绘制地图，配置相关数据和属性，这里可以根据自己需要，自行设置相关参数和选项，如下，很简单（可以参考echarts官网资料进行配置）：
最后，保存html文件，用浏览器打开这个文件，绘制的中国地图效果如下，很不错吧：
至此，我们就完成了在html中绘制中国地图。总的来说，整个过程很简单，不难，借助echarts我们可以快速绘制地图，只要你有一定的前端基础，会简单的html，js，css，熟悉一下相关示例和代码，很快就能掌握的，当然，你也可以使用其他框架来绘制中国地图，像g2,d3等，都可以，网上也有相关教程和资料，感兴趣的可以搜一下，希望以上分享的内容能对你有所帮助吧，也欢迎大家评论、留言。
以上就是关于html5地理定位api怎么连接百度地图全部的内容，包括:html5地理定位api怎么连接百度地图、百度地图在html中怎么自动定位、html5实现地图上定位导航路线等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）