百度地图用法封装

最新推荐文章于 2025-05-06 14:18:08 发布

原创最新推荐文章于 2025-05-06 14:18:08 发布 · 570 阅读

1 ·

CC 4.0 BY-SA版权

js 同时被 2 个专栏收录

19 篇文章

订阅专栏

php插件积累

7 篇文章

订阅专栏

百度地图：各种接口地址 http://developer.baidu.com/map/jsdemo.htm

项目中实现想要的多地址功能，进行封装

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        #allmap {width: 500px;height: 400px;overflow: hidden;margin:0;font-family:"微软雅黑";}
        #l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
        #r-result{height:100%;width:20%;float:left;}
    </style>
    <script type="text/javascript" _src="http://app.mapabc.com/apis?&t=flashmap&v=2.3.4&key=c68d4780b07cf11486dbf9ed10dad4896f0a251009454cae86977729da75c7f64d6896ee91ff7241"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js" charset="UTF-8"></script>
    <link rel="stylesheet" href="http://icon.xcar.com.cn/2011newcar/css/baidu_box.css" />
</head>
<body>
<div id="allmap" style="float:left"></div>


</body>
</html>
<script type="text/javascript">
    function show_map(arr){
        var map;
        window.mapObj=map = new BMap.Map("allmap");     //创建地图实例
        //获取第一个地址来做地图的中心定位
        var point = new BMap.Point(arr[0][0], arr[0][1]);//初始化地图，设置中心点坐标和地图级别
        map.centerAndZoom(point,15);                    //多图用到的，保留
        map.enableScrollWheelZoom(true);            //用鼠标滚轮控制缩放开关
        map.addControl(new BMap.NavigationControl());   //地图平移缩放控件
        map.addControl(new BMap.OverviewMapControl());  //缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图
        map.addControl(new BMap.ScaleControl()); //比例尺控件，默认位于地图左下方，显示地图的比例关系。
        map.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP,BMAP_HYBRID_MAP]}));//地图类型控件


        function mapInit(x, y ,coname, addr ,tel,icon) {
            var info = "<br />地址："+ addr +"<br />电话：<font>"+tel+"</font>";
            addMarker(x,y,coname,icon,info);
        }


        // 编写自定义函数,创建标注
        function addMarker(zuobiao_x,zuobiao_y,coname,tag,str){
            var point=new BMap.Point(zuobiao_x,zuobiao_y);
            var icon = new BMap.Icon("http://icon.xcar.com.cn/2011newcar/images/sq_baidu_img/sq_baidu_sprite.png", new BMap.Size(93, 59));
            var myicon={icon:icon,offset:new BMap.Size(0,-30)};
            if(arr.length > 1){//一个地址显示自定义的图片
                var marker=new BMap.Marker(point);
            }else{ //多个地址传tag
                var marker=new BMap.Marker(point,myicon);
            }


            var searchInfoWindow = new BMapLib.SearchInfoWindow(map, str, {
                title  : "<a href='http://dealer.xcar.com.cn/111' target='_blank'>"+coname+"</a>",      //标题
                width  : 290,             //宽度
                panel  : "panel",         //检索结果面板
                enableAutoPan : true,     //自动平移
                searchTypes   :[
                    BMAPLIB_TAB_TO_HERE,  //到这里去
                    BMAPLIB_TAB_SEARCH  //在附近查找
                ]
            });
            marker.addEventListener("click", function(e){
                searchInfoWindow.open(marker);
            });
            //ie6不支持png透明所以得处理一下。
            var label = new BMap.Label(tag,{offset:new BMap.Size(5,1)});
            label.setStyle({
                color : "white",
                fontSize : "10px",
                height : "15px",
                lineHeight : "15px",
                border: '0',
                'font-weight': 'bold',
                background: "url() no-repeat 0 0",
                fontFamily:"微软雅黑"
            });
            marker.setLabel(label);
            map.addOverlay(marker);
            return marker;
        }


        for (var i = 0; i < arr.length; i ++) {
            mapInit(arr[i][0],arr[i][1],arr[i][2],arr[i][3],arr[i][4],arr[i][5]);
        }
    }


    var arr = new Array();
    arr[0] = new Array(106.643538,26.564753,'公司名称1','公司地址1','公司电话1','A');
    arr[1] = new Array(106.642217,26.553163,'公司名称2','公司地址2','公司电话2','B');
    arr[2] = new Array(106.645217,26.573163,'公司名称3','公司地址3','公司电话3','C');
    arr[3] = new Array(106.647217,26.574163,'公司名称4','公司地址4','公司电话4','D');


    show_map(arr);
</script>