前端js调用百度地图常用基本功能

作者: 索哥来了 | 来源:发表于2017-05-22 14:44 被阅读0次

前端js调用百度地图常用基本功能
8.25兄弟会
移动端调用手机电话功能以及百度地图
vue异步调用百度地图
iOS 后台给的百度经纬前端地图位置发生偏差
js调用百度地图
百度地图marker事件脱坑总结
百度地铁图JS API使用
WebApi的调用-1.前端调用
调用百度地图实现基本功能

调用百度地图前需要完成的步骤：
1.申请百度账号
2.申请密钥（AK）。
具体api文档请点击百度地图JavaScript API 查看
点击进入上面链接后，如下图，点击获取密钥，然后点创建应用。

图1

里面的配置参数，我们按照描述来就好，如图，我们取名 test，应用类型选择浏览器端，然后设置白名单。点击提交就生成了我们需要的密钥（AK）：

图3

3.用上一步生成的密钥，我们就可以调用百度地图实现我们的地图功能了。
代码如下：

// 以下代码是本人根据以前做的项目整理出来的，纯属手写，如有不规范处还请指出。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0;}
.map{width: 500px;height: 500px;border:1px solid #666;float:left;}
.txt{float:left;margin-left:20px;}
input{width: 200px;height: 30px;display: block;margin-bottom:10px;border:1px solid #ccc;}
</style>
</head>
<body>
<div id="map" class="map"></div>
<div id="txt" class="txt">
    <input type="text" id="keyword" placeholder="请输入关键字">
    <input type="text" id="province" placeholder="显示具体省" readonly style="background: #dcdcdc;">
    <input type="text" id="city" placeholder="显示具体市" readonly style="background: #dcdcdc;">
    <input type="text" id="address" placeholder="显示具体地址" readonly style="background: #dcdcdc;">
</div>
</body>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=SoacLT8htV8B0rzsZ0PR2aLmnB0h0pRP"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
<script type="text/javascript">
window.onload=function(){
    var oKeyword = document.getElementById("keyword");
    var oProvince = document.getElementById("province");
    var oCity = document.getElementById("city");
    var oAddress = document.getElementById("address");

    var foo = {
        //后面的操作，都是把地址信息填入这个address，所以传给后台的时候就可以直接传这个数据
        address : {
            province : '',
            provinceCode : '0',
            city : '',
            cityCode : '0',
            district : '',
            districtCode : '0',
            longitude : '',
            latitude : ''
        },
        // 根据point来初始化地图
        initMap : function(lng,lat){
            var _this = this;

            var map = new BMap.Map("map");  // 创建Map实例
            var point = new BMap.Point(lng, lat)    // 创建点坐标
            map.centerAndZoom(point, 15);   // 初始化地图,设置中心点坐标和地图级别
            map.enableScrollWheelZoom(true);    //开启鼠标滚轮缩放

            // map.addControl(new BMap.MapTypeControl());   //添加地图类型控件

            // 地图的一些配置项
            var navigationControl = new BMap.NavigationControl({
                anchor: BMAP_ANCHOR_TOP_LEFT,   // 靠左上角位置
                type: BMAP_NAVIGATION_CONTROL_LARGE,    // LARGE类型
                enableGeolocation: true // 启用显示定位
            });
            map.addControl(navigationControl);// 缩放标尺

            // 添加中心小红点
            var centerPoint = new BMap.Marker(point);
            map.addOverlay(centerPoint);

            // 当前位置写入右侧input
            var myGeo = new BMap.Geocoder();
            myGeo.getLocation(new BMap.Point(lng, lat),function (result) {
                _this.callBack(result,'drag')
            });

            _this.dragMap(map,centerPoint); //添加拖拽事件

            //建立一个自动完成的对象，keyword出现下拉选择
            var ac = new BMap.Autocomplete({    
                "input" : "keyword",
                "location" : map
            });
            ac.addEventListener("onconfirm", function(e) {
                // console.log(e)
                var thisValue = e.item.value;
                // console.log(thisValue)
                var thisProvince = thisValue.province;
                var thisCity = thisValue.city;
                var thisDistrict = thisValue.district;
                var thisStreet = thisValue.street;
                var thisStreetNumber = thisValue.streetNumber;
                var thisBusiness = thisValue.business;

                var thisKey = thisProvince+thisCity+thisDistrict+thisStreet+thisStreetNumber+thisBusiness;

                _this.searchByKey(map,thisKey,centerPoint);
            })
        },
        // 地图拖拽
        dragMap : function(map,centerPoint){
            var _this = this;
            var myGeo = new BMap.Geocoder();

            map.addEventListener("dragging", function showInfo() {
                var cp = map.getCenter();
                centerPoint.setPosition(new BMap.Point(cp.lng, cp.lat));
                map.panTo(new BMap.Point(cp.lng, cp.lat));
                map.centerAndZoom(centerPoint.getPosition(), map.getZoom());
            });

            map.addEventListener("dragend",function showInfo() {
                var cp = map.getCenter();
                myGeo.getLocation(new BMap.Point(cp.lng, cp.lat),function (result) {
                    // console.log(result)
                    centerPoint.setPosition(new BMap.Point(cp.lng, cp.lat));
                    map.panTo(new BMap.Point(cp.lng, cp.lat));
                    map.centerAndZoom(centerPoint.getPosition(), map.getZoom());

                    _this.callBack(result,'drag')
                });
            });
        },
        // 地图拖拽后 和 输入关键字后选择 的回调函数
        callBack : function(result,tag){
            var _this = this;
            var thisAddress = result.addressComponents;
            if(thisAddress.province == "新疆维吾尔自治区" || thisAddress.province == "西藏自治区"){
                alert("很抱歉，新疆和西藏地区暂不支持该服务，敬请期待。");
                oKeyword.value = "";
                oProvince.value = "";
                oCity.value = "";
                oAddress.value = "";
            }else{
                if(tag==='drag'){
                    oKeyword.value = result.address;
                }
                oProvince.value = thisAddress.province;
                oCity.value = thisAddress.city;
                oAddress.value = thisAddress.district + thisAddress.street + thisAddress.streetNumber;

                // console.log(result);
                _this.address.province = thisAddress.province;
                _this.address.city = thisAddress.city;
                _this.address.district = thisAddress.district;
                _this.address.longitude = result.point.lng;
                _this.address.latitude = result.point.lat;
            }
            console.log(JSON.stringify(_this.address))
        },
        // 输入关键字搜索，根据关键字更新地图并获取信息
        searchByKey : function(map,keyword,centerPoint){
            var _this = this;

            var localSearch = new BMap.LocalSearch(map);
            localSearch.enableAutoViewport();
            localSearch.search(keyword);
            localSearch.setSearchCompleteCallback(function (searchResult) {
                if(searchResult && searchResult.getPoi(0)){
                    var poi = searchResult.getPoi(0);
                    if(poi.point){
                        map.centerAndZoom(poi.point,15);
                        centerPoint.setPosition(poi.point);

                        var myGeo = new BMap.Geocoder();
                        myGeo.getLocation(poi.point, function(result){
                            _this.callBack(result)
                        });
                    }
                }
            })
        },
        // 一般初始化地图，设置北京天安门
        init : function(){
            _this.initMap(116.404,39.915)
        },
        // 初始化当前城市
        initLocalCity : function(){
            var _this = this;

            var map = new BMap.Map("map");
            var myCity = new BMap.LocalCity();
            myCity.get(function(result){
                console.log(result);
                // var point = result.center;
                var lng = result.center.lng;
                var lat = result.center.lat;

                _this.initMap(lng,lat)
            });
        },
        // 初始化当前位置
        initLocalPoint : function(){
            var _this = this;

            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var lng = position.coords.longitude; 
                    var lat = position.coords.latitude;
                    // console.log(lng+':'+lat);
                    var gpsPoint = new BMap.Point(lng, lat); 

                    // 坐标转成百度需要的坐标，并初始化地图
                    // gpsPoint：转换前坐标，第二个参数为转换方法，0表示gps坐标转换成百度坐标，callback回调函数，参数为新坐标点 
                    BMap.Convertor.translate(gpsPoint, 0, function(data){
                        _this.initMap(data.lng,data.lat);
                    })
                })
            } else {
                alert("Your browser does not support Geolocation!");
            }
        }
    }

    // foo.init(); //以北京初始化地图
    foo.initLocalCity(); //以当前城市初始化地图
    // foo.initLocalPoint(); //以当前坐标初始化地图

    // 输入关键字的时候，清空input里面的城市信息
    oKeyword.oninput=function(){
        oProvince.value = "";
        oCity.value = "";
        oAddress.value = "";
    }
}
</script>
</html>

效果图：

图4

上面代码每块注释都有，我就不分成一块一块说了，直接拷贝过去是可以运行的。下面笔者说下引入的两个js：
第一个是百度地图必须引入的js，后面的ak就是我们刚刚创建应用的密钥。
第二个js的功能是：当我们想以当前位置初始化地图的时候，我们用到了 getCurrentPosition，但是用 getCurrentPosition获取到的坐标是 GPS 经纬度坐标，而百度地图的坐标是经过特殊转换的，所以，在获取定位坐标和初始化地图之间需要进行一步坐标转换工作，该转换方法百度API里面已经提供了，转换一个点或者批量装换的方法均有提供：
单个点转换需引用 http://developer.baidu.com/map/jsdemo/demo/convertor.js
批量转换需引用 http://developer.baidu.com/map/jsdemo/demo/changeMore.js
所以这里我们引入了前者。
（但是笔者发现，用getCurrentPosition这个方法的时候，体验不是很好，初始化页面的时候地图加载很慢。笔者正在寻找更好的办法，后续再更新！）

前端js调用百度地图常用基本功能
调用百度地图前需要完成的步骤：1.申请百度账号2.申请密钥（AK）。具体api文档请点击百度地图JavaScri...
8.25兄弟会
js调用百度地图api实现定位百度地图的API，接口很丰富，实现定位功能 // 百度地图API功能 varmap...
移动端调用手机电话功能以及百度地图
移动端调用手机电话功能移动端调用百度地图 html js
vue异步调用百度地图
Vue 异步调用百度地图新建一个map.js 在src/assets创建一个map.js 在你的百度地图页面中调...
iOS 后台给的百度经纬前端地图位置发生偏差
今天简单说一下，我遇到的坑。后台给的百度经纬前端调用高德地图和百度地图展示是同一个地图，客户说你的地图展示有偏差...
js调用百度地图
百度地图marker事件脱坑总结
缘起百度地图2.0 marker 绑定点击事件，事件内有清空覆盖物的调用，这时候会出现js报错： js 报错信...
百度地铁图JS API使用
调用百度地铁图JS API示例 1使用之前也要申请百度地图JavaScript AP ak 2 添加一个div容器...
WebApi的调用-1.前端调用
前端调用 html js 后台
调用百度地图实现基本功能
0.使用百度地图,点击屏幕下设置标注,并显示出当前标注的地区地址 1.项目工程文件设置参考百度SDK 2.在百度地...