Home / Blog / it

百度地图地址展示

Author: Vic.Wang 2017/12/29 Tags:mapbaiduaddressshow百度地图地图展示

之前做过的一些企业网站,总会在联系我们栏目放一张公司地址的截图,后来自己给弄成了调用百度地图,动态设置,也能对地图进行操作,比单单一张静态图片好多了,产品看到后,这便成了硬性要求。。。之后做的几次项目里面就被要求用百度地图了,自己给自己挖坑哈。

在程序里凡两次以上使用都应该写成通用方法,这里用的次数多了,干脆写篇文章,以后就到这里翻代码了。

废话不多说,看代码

引入百度地图文件:

    <script src="http://api.map.baidu.com/api?v=2.0&ak=xxxxxxxx&s=1"></script>
                    

记得链接中的 ak 换成自己的哦~

    var address = '浙江省杭州市西湖区西溪湿地公园北门';

    //百度地图
    var map = new BMap.Map("map"); //map为显示位置的#ID
    var point = new BMap.Point(116.331398,39.897445); //初始位置
    map.enableScrollWheelZoom(); //启用鼠标缩放
    map.centerAndZoom(point, 12); //初始缩放级别

    //添加比例尺
    var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});
    var top_left_navigation = new BMap.NavigationControl();
    map.addControl(top_left_control);
    map.addControl(top_left_navigation);

    // 创建地址解析器实例
    var myGeo = new BMap.Geocoder();

    // 将地址解析结果显示在地图上,并调整地图视野
    myGeo.getPoint(address, function(point){
        if (point) {
            map.centerAndZoom(point, 16);
            var marker = new BMap.Marker(point);
            map.addOverlay(marker); //添加定位点

            // 创建文本显示标签
            var label = new BMap.Label(address, {offset:new BMap.Size(-90, -30)});
            marker.setLabel(label);
        }
    }, '杭州');
                    

上面的一些值,可按需调整哦,比如位置,缩放级别,文本标签的相对位置等。

效果如下: