百度地图实用性知识点

如何获取百度地图并添加组件功能

添加的cordova插件：cordova plugin add cordova-plugin-geolocation,获取设备位置信息。

一、注册百度账号并获取密钥

• 在html中采用<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=密钥">在这里插入代码片

二、html文件代码

• 代码为：

	<div id="container"></div>	//添加容器存放地图及控件
    <div>请输入查询地址：<input type="text" id="suggestId" size="20" value="百度"/></div>	//添加一个地址搜索框
    <div id="searchResultPanel"></div>	//从查找结果中挑选地址

三、css文件代码

• 代码为：

	
	html{height:100%}  
	body{height:100%;margin:0px;padding:0px}  
	#container{height:66.6%} 
	#searchResultPanel{border:1px solid #C0C0C0;width:150px;height:auto; display:none;}
	

四、js文件代码

• 代码为：

    document.addEventListener("deviceready",onDeviceReady,false);
	function onDeviceReady(){
    	console.log("ready...");
    	getPosition();	//获取位置信息
	}

	var map = new BMap.Map("container");    // 创建地图

	function getPosition(){
    console.log("getPosition...");
    if(navigator.geolocation){		//判断是否支持地理定位
        navigator.geolocation.getCurrentPosition(showPosition,function Error(error)
            {enableHighAccuracy=true,//是否要求高精度的地理位置信息
            timeout=1000,//对地理位置信息的获取操作做超时限制，如果再该事件内未获取到地理位置信息，将返回错误
            maximumAge=60*1000//设置缓存有效时间，在该时间段内，获取的地理位置信息还是设置此时间段之前的那次获得的信息，超过这段			时间缓存的位置信息会被废弃
            }
            //方式二：
            //function (error) {   //传入了error对象
            // alert(error.code);}
                //error对象的code属性有如下属性值:
                //PERMISSION_DENIED(1):(permission_denied):用户单机信息条上的“不共享”按钮或直接拒绝被获取位置信息
                //POSITION_UNAVAILABLE(2):(position_unavailable):(position_unavailable)网络不可用或者无法连接到获取位置信息的卫星
                //TIMEOUT(3):(timeout)网络可用但在计算机用户的位置上花费过长时间
                //UNKNOWN_ERROR(0):(unknown_error)发生其他未知错误
            )
   	 }else{
            alert("您当前使用的浏览器不支持地理定位服务");
        }
	}

	function showPosition(position){
    	console.log("showPosition...");
    var ggPoint = new BMap.Point(position.coords.longitude,position.coords.latitude);// 创建点坐标
    map.centerAndZoom(ggPoint,18);                 // 初始化地图，设置中心点坐标和地图级别 
    drawMap();
    transPosition(ggPoint);  
    drawPolygon();
	}

    
	function transPosition(ggPoint){
    	console.log("transPosition...");
    	var ggPoint=ggPoint;
    translateCallback=function (data){
        if(data.status===0) {
            console.log("translate...");
            var marker = new BMap.Marker(data.points[0]); // 创建标注
            map.addOverlay(marker);   // 将标注添加到地图中
            var label = new BMap.Label("当前位置",{offset:new BMap.Size(20,-10)});
            marker.setLabel(label);// //添加百度label
            map.setCenter(data.points[0]); //缩放级别范围0到17
    
        }
      }
  
    setTimeout(function(){
        console.log("setTimeout...");
        var convertor = new BMap.Convertor();
        var pointArr = [];
        pointArr.push(ggPoint);
        convertor.translate(pointArr, 1, 5, translateCallback)
    }, 1000);
       
	}


	function drawPolygon(){		//自定义一块区域，可用作类似手机定位考勤
    	console.log("drawPolygon...");
    var ploygon=new BMap.Polygon([
        new BMap.Point(113.485485,23.107374),
        new BMap.Point(113.485435,23.106929),
        new BMap.Point(113.486046,23.106813),
        new BMap.Point(113.4861,23.107345)
    ],{strokeColor:"blue",stokeWeight:2,strokeOpacity:0.5});
    map.addOverlay(ploygon);   
	}

	function drawMap(){
    	addApi();		添加地图api
    	addMapControl();	添加控件
	}

	function addMapControl(){
    	console.log("addMapControl...");
   	 	map.addControl(new BMap.NavigationControl({
        //type: BMAP_NAVIGATION_CONTROL_LARGE, //表示显示完整的平移缩放控件。
        //type: BMAP_NAVIGATION_CONTROL_SMALL, //表示显示小型的平移缩放控件。
        //type: BMAP_NAVIGATION_CONTROL_PAN, //表示只显示控件的平移部分功能。
        //type: BMAP_NAVIGATION_CONTROL_ZOOM, //表示只显示控件的缩放部分功能。
    anchor: BMAP_ANCHOR_TOP_LEFT, //表示控件定位于地图的左上角。
        //anchor: BMAP_ANCHOR_TOP_RIGHT, //表示控件定位于地图的右上角。
        //anchor: BMAP_ANCHOR_BOTTOM_LEFT, //表示控件定位于地图的左下角。
        //anchor: BMAP_ANCHOR_BOTTOM_RIGHT, //表示控件定位于地图的右下角。
    })); //设置地图平移缩放控件，PC端默认位于地图左上方type控件外观,anchor控件的停靠位置,offset偏移的位置
    map.setCurrentCity("广州"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用
    map.addControl(new BMap.MapTypeControl({
        //type: BMAP_MAPTYPE_CONTROL_HORIZONTAL,//按钮水平方式展示，默认采用此类型展示。
        //type: BMAP_MAPTYPE_CONTROL_DROPDOWN,//按钮呈下拉列表方式展示。
        //type: BMAP_MAPTYPE_CONTROL_MAP//以图片方式展示类型控件，设置该类型后无法指定maptypes属性。
        mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP] }));
        //设置地图类型控件,type控件样式,mapTypes控件展示的地图类型，默认为普通图、卫星图、卫星加路网混合图和三维图。通过此属性可配置控件展示的地图类型。
    map.addControl(new BMap.OverviewMapControl({
        isOpen: true,
        anchor: BMAP_ANCHOR_BOTTOM_RIGHT
    }));//设置地图类型控件缩略地图控件，默认位于地图右下方,isOpen缩略图是否隐藏
    map.addControl(new BMap.ScaleControl());//设置比例尺控件
	}

	function addApi(){      // 百度地图API功能，实现了搜索与搜索得到地点信息
    	console.log("addApi...");
    	function G(id){return document.getElementById(id);} 

		var ac=new BMap.Autocomplete(    //建立一个自动完成的对象
			{"input":"suggestId","location":map
    	});
	ac.addEventListener("onhighlight",function(e){  //鼠标放在下拉列表上的事件
	var str="";
		var _value = e.fromitem.value;
		var value = "";
		if (e.fromitem.index > -1){
			value=_value.province+_value.city+_value.district+_value.street+_value.business;
		}    
		str="FromItem<br/>index="+e.fromitem.index+"<br/>value="+value;
		value = "";
		if (e.toitem.index > -1) {
			_value = e.toitem.value;
			value=_value.province+_value.city +_value.district+_value.street+_value.business;
		}    
		str+="<br/>ToItem<br/>index="+e.toitem.index+"<br/>value="+value;
		G("searchResultPanel").innerHTML=str;
    });
    
	var myValue;
	ac.addEventListener("onconfirm", function(e){    //鼠标点击下拉列表后的事件
	var _value = e.item.value;
		myValue=_value.province +_value.city+_value.district+_value.street+_value.business;
		G("searchResultPanel").innerHTML="onconfirm<br/>index="+e.item.index+"<br/>myValue="+myValue;
		setPlace();
    });
    
	function setPlace(){
		map.clearOverlays();    //清除地图上所有覆盖物
		function myFun(){
			var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
			map.centerAndZoom(pp,18);
			map.addOverlay(new BMap.Marker(pp));    //添加标注
		}
		var local=new BMap.LocalSearch(map, { //智能搜索
          onSearchComplete:myFun,
          renderOptions:{map: map}  //将检索结果展示在地图上
		});
		local.search(myValue);
    }
	}

• 小建议：大家在编程时，尽量多的添加console.log("");函数，方便调试，快速让自己发现问题所在。
• 大家觉得还可以，有帮助的话，请 关注 下新人我哦，我将继续努力，更多的让你们受益。