百度地图js 学习小记

<html>
<head>
<meta charset="utf-8"/>
<title>百度地图Demo</title>
<script src="http://api.map.baidu.com/api?v=2.0&ak=【你的百度ak秘钥】"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>

</head>
<body>
<div>
<h5>POI数据搜索</h5><br>
<input id="searchText" type="text"/><br/>
<input id="citySearchBtn" type="button" value="城市搜索"/>
<input id="nearBySearchBtn" type="button" value="圆形搜索"/>
<input id="inBoundsBySearchBtn" type="button" value="矩形搜索"/>
</div>

<div>
<h5>根据位置获取经纬度</h5>
<input id="addressNameTxt" type="text" placeholder="请输入地名信息"/>
<input id="pointMessageTxt" type="text" placeholder="请经纬度信息"/><br/>
<input id="MessageSearchBtn" type="button" value="信息检索"/>
</div>

<div>
<h5>百度地图定位</h5>
<input id="LocationByWebBtn" type="button" value="web定位"/>
<input id="LocationBySDKBtn" type="button" value="SDK定位"/>
</div>


<div>
<h5>路线规划</h5>
<input id="startPointTxt" type="text" placeholder="起点"/>
<input id="endPointTxt" type="text" placeholder="终点"/><br/>
<input id="walkPlanRouteBtn" type="button" value="步行路线规划"/>
<input id="transitPlanRouteBtn" type="button" value="公交规划"/>
<input id="drivePlanRouteBtn" type="button" value="驾车路线规划"/>
<input id="cleanMapBtn" type="button" value="清除地图覆盖物"/>
<input id="showPointBtn" type="button" value="展示规划线路"/>
</div>

<div>

</div>


<div id="map" style="width:75%;height:65%;" align="center"></div>


</body>

<script type="text/javascript">

$(window).load(function(){
initMap();

$("#cleanMapBtn").click(function(){
map.clearOverlays();
});


$("#showPointBtn").click(function(){
console.log("点数:"+points.length);
if(points.length>2){
var index=0;
var preMarker;
        var interval=setInterval(function showPoint(){
if(index>0){
map.removeOverlay(preMarker);
var p=new BMap.Polyline([points[index-1],points[index]],
      {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5});
map.addOverlay(p);
}
preMarker=new BMap.Marker(points[index]);
map.addOverlay(preMarker);
map.setCenter(points[index]);
index++;
if(index==points.length){clearInterval(interval);}
},50);
}
});



$("#citySearchBtn").click(function(){
var txt=$("#searchText").val();

if(txt){
citySearch(txt);
}else{
alert("请输入搜索内容");
return;
}
});

$("#inBoundsBySearchBtn").click(function(){
var txt=$("#searchText").val();
if(txt){
inBoundsSearch(txt);
}else{
alert("请输入搜索内容");
return;
}
});

$("#nearBySearchBtn").click(function(){
var txt=$("#searchText").val();
if(txt){
nearBySearch(txt);
}else{
alert("请输入搜索内容");
return;
}
});

$("#MessageSearchBtn").click(function(){
var point=$("#pointMessageTxt").val();
var message=$("#addressNameTxt").val();
var geoc=new BMap.Geocoder();
if(!(point || message)){
alert("请输入地址或者经纬度信息");
return;
}else if(point){
var p=new BMap.Point(point.split(";")[1],point.split(";")[0])
geoc.getLocation(new BMap.Point(point.split(";")[1],point.split(";")[0]), function(rs){
    var addComp = rs.addressComponents;
    var messageStr=addComp.province + addComp.city +  addComp.district + addComp.street +  addComp.streetNumber;
    $("#addressNameTxt").val(messageStr);
   });
}else if(message){
geoc.getPoint(message,function(point){
if(point){
$("#pointMessageTxt").val(point.lat+";"+point.lng);
}else{
alert("没有找到对应经纬度信息");
}
});
}
});


$("#LocationByWebBtn").click(function(){
getLocationByWeb();
});


$("#LocationBySDKBtn").click(function(){
getLocationBySDK();
});



$("#walkPlanRouteBtn").click(function(){
var startPoint =$("#startPointTxt").val();
var endPoint =$("#endPointTxt").val();

if(!(endPoint&&startPoint)){
alert("请输入起点和终点信息");
return;
}else{
planRoute(startPoint,endPoint,1);
}

});


$("#transitPlanRouteBtn").click(function(){
var startPoint =$("#startPointTxt").val();
var endPoint =$("#endPointTxt").val();

if(!(endPoint&&startPoint)){
alert("请输入起点和终点信息");
return;
}else{
planRoute(startPoint,endPoint,2);
}

});

$("#drivePlanRouteBtn").click(function(){
var startPoint =$("#startPointTxt").val();
var endPoint =$("#endPointTxt").val();

if(!(endPoint&&startPoint)){
alert("请输入起点和终点信息");
return;
}else{
planRoute(startPoint,endPoint,3);
}

});


});


function initMap(){
creatMap();
mapAddControl();
addMark();
addLine();
getLocation();
addDrawingControl();
/* pointClusterer ();*/
}

var map;

/* 新建一个地图 */
function creatMap(){
map=new BMap.Map("map");
map.centerAndZoom("北京",12);
addWindowInfo();
}


/* 地图图层添加控件 */
function mapAddControl(){
map.enableScrollWheelZoom(true);  
map.addControl(new BMap.NavigationControl());    
map.addControl(new BMap.ScaleControl());    
map.addControl(new BMap.OverviewMapControl());    
map.addControl(new BMap.MapTypeControl());    
}

/* 地图上添加一个点 */
function addMark(){
var point=new BMap.Point(116.404, 39.915);
var mark=new BMap.Marker(point);
markAddListener(mark);
markEnableDragging(mark);
map.addOverlay(mark);

}

/* 点添加点击事件 */
function markAddListener(mark){
mark.addEventListener("click", function(){    
alert("您点击了标注");    
});  
}

/* 点添加拖拽事件 */
function markEnableDragging(mark){
mark.enableDragging();    
mark.addEventListener("dragend", function(e){    
    alert("当前位置:" + e.point.lng + ", " + e.point.lat);    
}) ;  
}

/* 地图添加线 */
function addLine(){
var line=new BMap.Polyline(
[new BMap.Point(116.399, 39.910),
    new BMap.Point(116.405, 39.920)],
    {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
map.addOverlay(line);
}

/* 点添加信息窗口 */
function addWindowInfo(point){
var opts = {    
    width : 250,     // 信息窗口宽度    
    height: 100,     // 信息窗口高度    
    title : "Hello"  // 信息窗口标题   
}    
var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象    
if(!point){
point=map.getCenter();
}
map.openInfoWindow(infoWindow, point);      // 打开信息窗口
}

/* 城市搜索 */
function citySearch(point){
var search=new BMap.LocalSearch(map, {      
    renderOptions:{map: map}      
});      
search.search(point);
}

/* 矩形区域搜索 */
function inBoundsSearch(point){
var search=new BMap.LocalSearch(map,{
renderOptions:{map: map}
})

search.searchInBounds(point,map.getBounds());
}

/* 某个地点附近区域搜索 */
function nearBySearch(point){
var search=new BMap.LocalSearch(map,{
renderOptions:{map: map, autoViewport: true}
});
search.searchNearby(point,"长安路");
}

/* 根据经纬度获取地址明细 */
function getLocation(){
var geoc=new BMap.Geocoder();
map.addEventListener("click",function(e){
var p=e.point;
geoc.getLocation(p, function(rs){
    var addComp = rs.addressComponents;
    alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
   });
    });
}

/* 百度地图根据浏览器定位
*  注:有偏差
*/
function getLocationByWeb(){
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
alert('您的位置:'+r.point.lng+','+r.point.lat);
}else {
alert('failed'+this.getStatus());
}        
});
}

/* 百度地图根据内置SDK定位 
* 注:有偏差
*/
function getLocationBySDK(){
var geolocation = new BMap.Geolocation();
geolocation.enableSDKLocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
alert('您的位置:'+r.point.lng+','+r.point.lat);
}
else {
alert('failed'+this.getStatus());
}   
})
}

var points=[];
/* 地图添加画图空间 */
function addDrawingControl(){
var styleOptions = {
    strokeColor:"red",    //边线颜色。
    fillColor:"red",      //填充颜色。当参数为空时,圆形将没有填充效果。
    strokeWeight: 3,       //边线的宽度,以像素为单位。
    strokeOpacity: 0.8,    //边线透明度,取值范围0 - 1。
    fillOpacity: 0.6,      //填充的透明度,取值范围0 - 1。
    strokeStyle: 'solid' //边线的样式,solid或dashed。
}
    //实例化鼠标绘制工具
var drawingManager = new BMapLib.DrawingManager(map, {
    isOpen: false, //是否开启绘制模式
    enableDrawingTool: true, //是否显示工具栏
    drawingToolOptions: {
        anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
        offset: new BMap.Size(5, 5), //偏离值
        drawingModes : [BMAP_DRAWING_CIRCLE,BMAP_DRAWING_POLYGON] //设置显示画图的类型
    },
  /*   circleOptions: styleOptions, //圆的样式 */
    polylineOptions: styleOptions, //线的样式
    polygonOptions: styleOptions, //多边形的样式
    rectangleOptions: styleOptions //矩形的样式
});  
}

/* 点聚合实例 */
/* function pointClusterer(){
var markers = [];
var pt = null;

for(var i=0; i<1000; i++){
var pt=new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21);
markers.push(new BMap.Marker(pt));
}
var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});
} */


function planRoute(start,end,type){
var driving ;

if(type==1){
driving= new BMap.WalkingRoute(map, {    
        renderOptions: {map: map}    
    });    
driving.search(start, end);
}else if(type==2){
driving= new BMap.TransitRoute(map, {    
    renderOptions: {map: map}    
});    
driving.search(start, end);
}else if(type==3){
driving = new BMap.DrivingRoute(map, {    
    renderOptions: {    
        map   : map,     
        panel : "results",    
        autoViewport: true    
    }    
});   
points=[];
driving.setSearchCompleteCallback(function(){
points=driving.getResults().getPlan(0).getRoute(0).getPath(); 
var line=new BMap.Polyline(points);
map.addOverlay(line);
console.log("点数"+points.length);
});
driving.search(start, end);
}else{
console.log("【type】参数内容非法: "+type);
alert("系统参数异常请联系管理员。");
}
}




</script>


</html>
阅读更多

没有更多推荐了,返回首页