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>
来自微信公众号:编程社
程序员日常进阶宝典，欢迎关注！
