h5调用百度地图定位,h5地图自动定位如何实现
开发移动web或webapp时，在使用百度地图API的过程中，往往需要通过手机定位获取当前位置，并集中显示在地图上，这就需要html5的地理定位功能。
复制代码如下：
navigator . geolocation . getcurrentposition(回调)；
成功获取坐标后将执行回调函数callback；回调方法的参数是获取的坐标点；然后，您可以初始化地图，设置控件、中心点和缩放级别，然后将点叠加添加到地图：
复制代码如下：
var map=新的BMap。map( mapDiv )；//mapDiv是放置地图的Div的id。
map.addControl(新的BMap。navigation control())；
map.addControl(新的BMap。scale control())；
map.addControl(新的BMap。overview mapcontrol())；
map.centerAndZoom(point，15)；//点是坐标点，15是地图缩放级别，最高级别是18。
var pointMarker=新的BMap。标记(点)；
map . add overlay(point marker)；
但是，其实这还不够，显示的结果也不准确。这是因为getCurrentPosition得到的坐标是GPS经纬度坐标，百度地图的坐标是经过特殊转换的。所以在获取定位坐标和初始化地图之间需要一步坐标转换，百度API中已经提供了这种转换方法。有单点转换或批量安装更换的方法：单点转换需要http://developer.baidu.com/map/jsdemo/demo/convertor.js，批量转换需要http://developer.baidu.com/map/jsdemo/demo/changeMore.js。这里，只有前者是必需的：
复制代码如下：
BMap。converter . translate(gpsPoint，0，callback)；
//gpsPoint:转换前的坐标，第二个参数是转换方法，0表示gps坐标转换成百度坐标，回调函数，参数是新坐标点。
示例的详细代码如下：(引用中的ak是应用的键)
复制代码如下：
！声明文档类型
html lang=zh-cn
头
meta name= viewport content= initial-scale=1.0，user-scalable=no /
meta http-equiv= Content-Type Content= text/html；charset=utf-8 /
标题/标题
style type=text/css
*{
身高：100%；//设置高度，否则不显示。
}
/风格
script src= http://code . jquery . com/jquery-1 . 11 . 0 . min . js /script
script type= text/JavaScript src= http://API . map . Baidu . com/API？v=2.0ak=/script
script type= text/JavaScript src= http://developer . Baidu . com/map/js demo/demo/converter . js /script
脚本
$(function(){
navigator . geolocation . getcurrentposition(translate point)；//定位
});
函数转换点(位置){
var current lat=position . coords . latitude；
var current lon=position . coords . longitude；
var gpsPoint=新的BMap。点(currentLon，current lat)；
BMap。converter . translate(gpsPoint，0，init map)；//转换坐标
}
函数initMap(point){
//初始化地图
map=新BMap。map( map )；
map.addControl(新的BMap。navigation control())；
map.addControl(新的BMap。scale control())；
map.addControl(新的BMap。overview mapcontrol())；
map.centerAndZoom(point，15)；
map.addOverlay(新BMap。标记(点))
}
/脚本
/头
身体
div id=map/div
/body
/html
开发过程中，感觉电脑定位速度有点慢，因为无法获取坐标而无法显示地图。建议用手机测试一下，定位更快。
当然，如果只是开发移动网页，不需要使用jQuery。框架太大，可以用其他轻量级的移动js框架代替。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。