<a href="https://uri.amap.com/marker?position=经度,纬度&name=所在的位置名称">高德地图</a>
<a href="http://api.map.baidu.com/marker?location=纬度,经度&title=所在位置名称&content=所在位置的简介（可选）&output=html">百度地图</a>
注意: 高德地图和百度地图的经纬度传值是相反着的
可以实现的，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 BMap.Map("allmap")
var geolocation = new BMap.Geolocation()
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
map.panTo(r.point)
//alert('您的位置：'+r.point.lng+','+r.point.lat)
var pt = r.point
var geoc = new BMap.Geocoder()
geoc.getLocation(pt, function(rs){
var addComp = rs.addressComponents
//alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber)
$("#du-gps").text(addComp.district+addComp.street+addComp.streetNumber)
})
}
else {
alert('failed'+this.getStatus())
}
},{enableHighAccuracy: true})
</script>
经纬度有相差那个是正常的，用户用浏览打开时定位的IP不是用户本身电脑的IP,而是公网出口的IP.简单的说，你用电信上网，那用IP定位到的可能是你附近的某个电信大楼。
代码网上都有，出错的话你可以比对下
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<script type="text/javascript">
function getLocation()
{
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(showMap, handleError, {enableHighAccuracy:true, maximumAge:1000})
}else{
alert("您的浏览器不支持使用HTML 5来获取地理位置服务")
}
}
function showMap(value)
{
var longitude = value.coords.longitude
var latitude = value.coords.latitude
var map = new BMap.Map("map")
var point = new BMap.Point(longitude, latitude) // 创建点坐标
map.centerAndZoom(point, 15)
var marker = new BMap.Marker(new BMap.Point(longitude, latitude)) // 创建标注
map.addOverlay(marker) // 将标注添加到地图中
}
function handleError(value)
{
switch(value.code){
case 1:
alert("位置服务被拒绝")
break
case 2:
alert("暂时获取不到位置信息")
break
case 3:
alert("获取信息超时")
break
case 4:
alert("未知错误")
break
}
}
function init()
{
getLocation()
}
window.onload = init
</script>
</head>
<body>
<div id="map" style="width:600pxheight:600px"></div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）