Js百度地图综合实例，定位当前位置，查找周围店铺，点位追踪

<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">
    #allmap {width: 100%;height: 500px;overflow: hidden;margin-top:10px;font-family:"微软雅黑";}
    #controller{width: 800px;height: 120px;overflow: hidden;margin-top:10px;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script> //Configure your key here
    <title>百度地图综合demo</title>
</head>
<body>
    <div id="controller"><table border='1'>
        
        <tr><th>功能</th><th>数据</th><th>事件</th></tr>
            <tr><td>我的位置</td><td></td><td><button οnclick="myPosition()">我的位置</button></td></tr>
            <tr>
            <td>查找周边店铺</td><td><input type="text" placeholder="请输入你要查询的周边内容" id="selectInfo"/></td><td><button οnclick="search()">查询</button></td>
            </tr>
            <tr><td>点位追踪</td><td><input type="text" placeholder="请输入经度" id="lng"/>  <input type="text" placeholder="请输入纬度" id="lat"/> </td><td><button οnclick="searchPosition()">查询</button></td></tr>
            </table></div>
    <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
 
    // 百度地图API功能  Baidu maps API features
    var map = new BMap.Map("allmap");
    var lng,lat;
    var point = new BMap.Point(116.331398,39.897445);
    map.centerAndZoom(point,12);
    var geolocation = new BMap.Geolocation();
    alert('正在定位，请稍后...');
    geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            startOper(map,r);
            //alert('您的位置：'+r.point.lng+','+r.point.lat);
        }
        else {
            alert('failed'+this.getStatus());
        }        
    },{enableHighAccuracy: true})
    
    setTimeout(function(){
        map.setZoom(14);   
    }, 2000);  //2秒后放大到14级
    map.enableScrollWheelZoom(true);
    
    //查找我的位置 Find my place
    function myPosition(){
        alert("正在查找我的位置，请稍后！");
        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                
                startOper(map,r);
            }
            else {
                alert('failed'+this.getStatus());
            }        
        },{enableHighAccuracy: true})
    }
    //启动定位操作  Boot location operation
    function startOper(map,r){
        //使用新图标替换原始图标
        var myIcon = new BMap.Icon("fox.gif", new BMap.Size(300,157));
        var mk = new BMap.Marker(r.point,{icon:myIcon});
        mk.enableDragging(); //设置其可拖拽   
        mk.addEventListener("dragend", function(e){    
             addressAnalysis(e.point,mk);
        });
        var label = new BMap.Label("我在这",{offset:new BMap.Size(110,70)});
        map.addOverlay(mk);
        mk.setLabel(label);
        map.panTo(r.point);
        lng=r.point.lng;
        lat=r.point.lat;
        alert("查找完成");
        addressAnalysis(r.point);
    } 
    //店铺寻找  Shop looking
    function search(){
        var allOverlay = map.getOverlays();
        for (var i = 0; i < allOverlay.length -1; i++){
            try{
                if(allOverlay[i].getLabel().content  == "搜索到这里"||allOverlay[i].getLabel().content  == "我在这"){
                    
                }
                else{
                    map.removeOverlay(allOverlay[i]);
                }
            }catch(e){
                map.removeOverlay(allOverlay[i]);
            }
        
        }
        var selectInfo=document.getElementById("selectInfo").value;
        map.centerAndZoom(new BMap.Point(lng, lat), 11);
        //alert('当前点：'+lng+','+lat);
        var local = new BMap.LocalSearch(map, {
              renderOptions:{map: map, autoViewport:true}
        });
        local.searchNearby(selectInfo, "附近");
        
    }
    
    //寻找点位  Find point
    function searchPosition(){
        
        lng=document.getElementById("lng").value;
        lat=document.getElementById("lat").value;
        //alert('当前点：'+lng+','+lat);
        var searchPoint = new BMap.Point(lng,lat);
         var marker = new BMap.Marker(searchPoint); 
         var label = new BMap.Label("搜索到这里",{offset:new BMap.Size(0,0)});
        map.addOverlay(marker);
        marker.setLabel(label);
        map.panTo(searchPoint);
        addressAnalysis(searchPoint,marker);
        //var infoWindow = new BMap.InfoWindow("你查找的位置在这里",opts);  // 创建信息窗口对象 
        //map.openInfoWindow(infoWindow,searchPoint); //开启信息窗口
    }
    
    //地址解析器  Address parser
    function addressAnalysis(point,marker){
        var gc = new BMap.Geocoder(); 
        gc.getLocation(point, function(rs)
        {
            var opts = {
                width : 250,     // 信息窗口宽度
                height: 30,     // 信息窗口高度
                //title : "此为自定义信息窗口" , // 信息窗口标题
                enableMessage:true//设置允许信息窗发送短息
             };
             var addComp = rs.addressComponents;
             var adr="你处于 " + addComp.city + ", " + addComp.district + ", " + addComp.street+"附近";
             //创建信息窗口，点击标注时显示标注对应的车牌号码以及当前地址
             var infoWindow1 = new BMap.InfoWindow(adr,opts);
             //marker.addEventListener("click", function(){map.openInfoWindow(infoWindow1,point);});
             map.openInfoWindow(infoWindow1,point);
        });
    }
</script>
来自微信公众号:编程社
程序员日常进阶宝典，欢迎关注！
Js百度地图综合实例，定位当前位置，查找周围店铺，点位追踪

猜你喜欢
