百度地图在web中的使用（一）

百度地图在web中的使用（js）

背景：在公司做一个地理位置的自定义字段，需要用到地图来获取经纬度和地址，在这选择了百度地图

准备工作

• 注册百度地图开发者，创建应用获取key http://lbsyun.baidu.com/

使用过程

1. 引入js文件

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=生成的key"></script>

2. 创建一个div容器用来显示地图：

<div id="map"></div>

3. 实例化地图：

//百度地图API功能
var map = new BMap.Map("map");    //创建Map实例

4. 使用百度地图：

map.centerAndZoom(new BMap.Point(116.403963, 39.915119), 12);  // 初始化地图,设置中心点坐标和地图级别，北京-天安门
	//添加地图类型控件
	map.addControl(new BMap.MapTypeControl({
		mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));
	map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

5. 百度地图获取当前位置：（基于浏览器获取）

	var geolocation = new BMap.Geolocation();          //实例化
	geolocation.getCurrentPosition(function(r){        //获取当前位置方法  
		if(this.getStatus() == BMAP_STATUS_SUCCESS){
			var mk = new BMap.Marker(r.point);         //r就是获取到的信息
			map.addOverlay(mk);        //创建标注
			map.panTo(r.point);        //标注移到这个地点
			alert('您的位置：'+r.point.lng+','+r.point.lat);
		}
		else {
			alert('failed'+this.getStatus());
		}        
	},{enableHighAccuracy: true})

5. 百度地图里的智能搜索：

    //内部自定义函数，根据ID获取对象
    function G(id) {
        return document.getElementById(id);
    }
    /*----------begin------*/
    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
        {"input" : "suggestId"
            ,"location" : map
        }
    );
    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(){
        //搜索后点击时先清空原搜搜记录
        $('#searchAddress').empty();   //之前的搜索结果清空
        var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
        });
        local.search(myValue);
        function myFun(){
            var sp = local.getResults().getPoi(0);    //获取第一个智能搜索的结果
            if(sp){
                var pp = sp.point;
                lastSearch.lng = pp.lng;
                lastSearch.lat = pp.lat;  //得到搜索位置的经纬度
                //搜索显示结果列表
                showSearchPlace(lastSearch.lng,lastSearch.lat,local.getResults().keyword);
            }else{
                showSearchPlace(0, 0, '该地址百度地图解析失败')
            }
        }
    }

6. 百度地图根据经纬度获取当前地址：

    /**
     * 根据经纬度获取地址
     * @param lng
     * @param lat
     */
    function getAddressBylnglat(lng, lat){
        point = new BMap.Point(lng, lat);   //实例化
        var marker = new BMap.Marker(point);// 创建标注
        map.clearOverlays();                //添加新的标注前先清除其他的标注
        map.addOverlay(marker);             // 将标注添加到地图中
        var getData = new BMap.Geocoder();  //根据经纬度获取地址
        getData.getLocation(point, function(rs){
            var pointAddress = rs.addressComponents;
            var address = pointAddress.province+pointAddress.city+pointAddress.district+pointAddress.street+pointAddress.streetNumber;
            addTextToPoint(marker, address);//增加文字信息
            marker.enableDragging();        //标注可拖拽
            // 开启事件监听
            marker.addEventListener("dragend", function (e) {
                var x = e.point.lng; //经度
                var y = e.point.lat; //纬度
                //根据经纬度获取地址信息
                getAddressBylnglat(x, y);
            });;
            //修改地图底部的地址信息
            //$('#suggestId').val('');
            clearAddress();                        //自定义方法，清除掉之前的记录
            showSearchPlace(lng, lat, address)     //自定义方法，把查询到的地址和经纬度显示在页面上
        });
    }

7. 百度地图根据经纬度和地址信息在地图中创建标注同时文字信息：

    /**
     * 在地图上根据查询的地址创建标注
     * @param
     */
    function makePoint(lng, lat, address){
        var point = new BMap.Point(lng, lat);
        map.centerAndZoom(point, 15);  //地址显示级别
        var marker = new BMap.Marker(point);// 创建标注
        map.clearOverlays();                //添加新的标注前先清除其他的标注
        map.addOverlay(marker);             // 将标注添加到地图中
        addTextToPoint(marker, address);    //增加文字信息
        marker.enableDragging();            //标注可拖拽
        // 开启事件监听
        marker.addEventListener("dragend", function (e) {
            var x = e.point.lng; //经度
            var y = e.point.lat; //纬度
            //根据经纬度获取地址信息
            getAddressBylnglat(x, y);
        });
    }
    //标注上增加文字信息
    function addTextToPoint(marker, address){
        var label = new BMap.Label(address,{offset:new BMap.Size(20,-10)});
	    marker.setLabel(label);
    }