纯JS百度地图API应用，调用百度地图

纯JS百度地图API应用，调用百度地图

1.登录百度地图开放平台：地址服务 (baidu.com)

登录后，打开控制台

2.打开我的应用，点击创建应用

创建应用界面：应用名称任意，符合条件即可；如果是部署浏览器就选择浏览器端，以此类推。

3.复制访问AK，粘贴到以下引入的js：

<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你的百度地图应用访问AK"></script>

这句一定要在加载地图前，最好放在最上面。

4.百度地图js，粘贴即可：

<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你的百度地图应用访问AK"></script>

<div id="allmap" style="width:100%;height: 300px;"></div>

<script type="text/javascript">
    var province=0;
    var city=0;
    var district=0;
    var street=0;

    // GL版命名空间为BMapGL
    // 按住鼠标右键，修改倾斜角和角度
    var map = new BMapGL.Map("allmap");    // 创建Map实例
    map.centerAndZoom(new BMapGL.Point(118.14621, 24.51253), 12);  // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
    map.addControl(zoomCtrl);

    var cityControl = new BMapGL.CityListControl({
        // 控件的停靠位置（可选，默认左上角）
        anchor: BMAP_ANCHOR_TOP_LEFT,
        // 控件基于停靠位置的偏移量（可选）
        offset: new BMapGL.Size(10, 5)
    });
    // 将控件添加到地图上
    map.addControl(cityControl);

    // 创建定位控件
    var locationControl = new BMapGL.LocationControl({
        // 控件的停靠位置（可选，默认左上角）
        anchor: BMAP_ANCHOR_TOP_RIGHT,
        // 控件基于停靠位置的偏移量（可选）
        offset: new BMapGL.Size(20, 20),
        enableAutoLocation :  true,
        showAddressBar: true // 设置为true以显示地址信息
    });
    // 将控件添加到地图上
    map.addControl(locationControl);

    var address=0
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            var point = new BMapGL.Point(position.coords.longitude, position.coords.latitude);
            var geoc = new BMapGL.Geocoder();
            geoc.getLocation(point, function(rs){
                var addComp = rs.addressComponents;
                address=addComp.province  + addComp.city + addComp.district + ", " + addComp.street + addComp.streetNumber;
                document.getElementById("c_address").value=address;
            });
            map.centerAndZoom(point, 16);
            map.addOverlay( new BMapGL.Marker(point)); // 添加标注

        }, function(error) {
            switch(error.code) {
                case error.PERMISSION_DENIED:
                    alert("用户拒绝对获取地理位置的请求。");
                    break;
                case error.POSITION_UNAVAILABLE:
                    alert("位置信息是不可用的。");
                    break;
                case error.TIMEOUT:
                    alert("请求用户地理位置超时。");
                    break;
                case error.UNKNOWN_ERROR:
                    alert("未知错误。");
                    break;
            }
        });
    } else {
        alert("您的浏览器不支持地理定位。");
    }


    var ac = new BMapGL.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;
        document.getElementById("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;
        document.getElementById("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 BMapGL.Marker(pp));    //添加标注
        }
        var local = new BMapGL.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
        });
        local.search(myValue);
    }
</script>

5.效果：

地图大小调整页面上的div即可。

！！！！！！！！定位的位置与网络IP有一定关系。