百度地图搜索当前用户位置附近停车场示例

  百度地图搜索当前用户位置附近停车场,公园,餐馆示例

百度地图搜索当前用户位置附近停车场示例

思路就是

用BMap.Geolocation类获取经纬度
http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a7b34

然后使用BMap.LocalSearch进行搜索停车场
http://lbsyun.baidu.com/index.php?title=jspopular/guide/service#.E6.9C.AC.E5.9C.B0.E6.90.9C.E7.B4.A2

经测试使用BMap.Geolocation在Android的chrome下法获取准确的用户经纬度信息,微信和Android的Firefox没有问题。

使用原生H5 navigator.geolocation对象,在微信,Android Firefox中可以精确定位。Android chrome未开启系统位置服务,navigator.geolocation.getCurrentPosition会执行error回调。如果开启了位置服务,没有反应,不进入success也不进入error,shit。。需要注意的是原生navigator.geolocation(GPS)需要转换过坐标。

  百度地图搜索当前用户位置附近停车场,公园,餐馆示例源代码如下,使用原生H5 navigator.geolocation对象

<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-map{height:300px;width:100%;}
		#r-result,#r-result table{width:100%;}
	</style>
    <!--记得更换百度地图ak密钥,为了测试代码贡献我自己网站的了-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1offaO5cablVaW8XYuwtsrVb"></script>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <title>百度地图搜索当前用户位置附近停车场示例</title>
</head>
<body>
    <div id="l-map"></div>
    位置名称:<input type="text" id="addr" value="停车场" placeholder="如停车场,公园,餐馆" /><input type="button" value="搜索" onclick="doSearch()" />
    <div id="r-result"></div>
</body>
</html>
<script type="text/javascript">
    /*Power by showbo(http://www.w3dev.cn/),使用示例代码请保留出处*/
    var map = new BMap.Map("l-map");
    map.enableScrollWheelZoom();
    if (navigator.geolocation) {
        //获取用户名经纬度
        navigator.geolocation.getCurrentPosition(function (rst) {//获取成功
            alert('success')
            //GPS坐标,需要调用百度api转换为百度bd09ll坐标
            wgs84Tobd09ll({ lng: rst.coords.longitude, lat: rst.coords.latitude }, function (rst) {
                setCenter(new BMap.Point(rst.lng, rst.lat))
            }, function () {
                //转换失败直接用geolocation获得的经纬度,偏差大
                setCenter(new BMap.Point(rst.coords.longitude, rst.coords.latitude))
            })
          
        }, function () {//获取失败
            alert('获取当前用户经纬度失败,使用用户所在城市经纬度数据!'+arguments[0]); localCity();
        }, { enableHighAccuracy: true });
    }
    else {
        alert('您的浏览器不支持H5 geolocation对象,使用用户所在城市经纬度数据!');
        localCity();
    }
    var local = new BMap.LocalSearch(map, { renderOptions: { map: map, panel: "r-result", autoViewport: true } });
    //wgs84坐标转百度地图经纬度坐标
    //@lnglat:经纬度JSON对象,{lng:xxxx,lat:xxxx}
    //@success:转换成功回调
    //@error:转换失败回调
    function wgs84Tobd09ll(lnglat, success, error) {
        var url = 'http://api.map.baidu.com/geoconv/v1/?coords=' + lnglat.lng + ',' + lnglat.lat + '&ak=1offaO5cablVaW8XYuwtsrVb&callback=?';
        $.ajax({
            dataType: 'jsonp', type: 'get', cache: false
            , url: url
            , success: function (res) {
                if (res.status == 0) success({ lng: res.result[0].x, lat: res.result[0].y });//正常解码
                else {
                    alert('gps坐标转百度坐标错误' + res.status);
                    if (typeof error == 'function') error(res);
                }
            }
        });
    }
    function setCenter(point) { map.centerAndZoom(point, 18); map.clearOverlays(); addMarker(point); doSearch() }
    function localCity() { var myCity = new BMap.LocalCity(); myCity.get(function (rst) { setCenter(rst.center)}); }
    function addMarker(point) { var marker = new BMap.Marker(point); map.addOverlay(marker); }
    function doSearch() {
        var s = $('#addr').val();
        if (s == '') { alert('请输入位置名称!'); return false }
        local.searchNearby(s, map.getCenter(),500);//第三个参数为范围,单位米
    }
</script>

  百度地图搜索当前用户位置附近停车场,公园,餐馆示例源代码如下,使用:BMap.Geolocation

<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-map{height:300px;width:100%;}
		#r-result,#r-result table{width:100%;}
	</style>
    <!--记得更换百度地图ak密钥,为了测试代码贡献我自己网站的了-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1offaO5cablVaW8XYuwtsrVb"></script>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <title>百度地图搜索当前用户位置附近停车场示例</title>
</head>
<body>
    <div id="l-map"></div>
    位置名称:<input type="text" id="addr" value="停车场" placeholder="如停车场,公园,餐馆" /><input type="button" value="搜索" onclick="doSearch()" />
    <div id="r-result"></div>
</body>
</html>
<script type="text/javascript">
    /*Power by showbo(http://www.w3dev.cn/),使用示例代码请保留出处*/
    var map = new BMap.Map("l-map");
    map.enableScrollWheelZoom();
    var loc = new BMap.Geolocation();//pc端通过ip地址定位,不精确,用手机查看示例效果
    //获取用户名经纬度
    loc.getCurrentPosition(function (rst) {
        if (rst) { map.centerAndZoom(rst.point, 18); addMarker(rst.point); doSearch() }
        else {
            alert('获取当前用户经纬度失败,使用用户所在城市经纬度数据!');
            var myCity = new BMap.LocalCity();//定位城市
            myCity.get(function (rst) { map.centerAndZoom(rst.center, 18); addMarker(rst.center); doSearch() });
        }
    }, { enableHighAccuracy: true });
    var local = new BMap.LocalSearch(map, { renderOptions: { map: map, panel: "r-result", autoViewport: true } });
    function addMarker(point) { var marker = new BMap.Marker(point); map.addOverlay(marker); }
    function doSearch() {
        var s = $('#addr').val();
        if (s == '') { alert('请输入位置名称!'); return false }
        local.searchNearby(s, map.getCenter(),500);
    }
</script>

 


原创文章,转载请注明出处:百度地图搜索当前用户位置附近停车场示例

评论(0)Web开发网
阅读(207)喜欢(0)不喜欢(0)JavaScript/Ajax开发技巧