自己根据百度地图api改写的地图源码展示

最新推荐文章于 2022-12-13 15:32:43 发布

lvyang251314

最新推荐文章于 2022-12-13 15:32:43 发布

阅读量1.3k

点赞数 1

分类专栏：前端文章标签：百度地图

本文链接：https://blog.csdn.net/lvyang251314/article/details/86491383

版权

前端专栏收录该内容

39 篇文章 1 订阅

订阅专栏

1.效果图(补充：大小可以根据需求改最外面容器大小，宽度不是全屏平铺的时候要给固定宽度)

2.源码<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>中智河南百度地图</title>
       <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
   #allmap {width:400px;height:500px;overflow: hidden;}
   #result {width:100%;font-size:12px;}
   dl,dt,dd,ul,li{
       margin:0;
       padding:0;
       list-style:none;
   }
   dt{
       font-size:14px;
       font-family:"微软雅黑";
       font-weight:bold;
       border-bottom:1px dotted #000;
       padding:5px 0 5px 5px;
       margin:5px 0;
   }
   dd{
       padding:5px 0 0 5px;
   }
   li{
       line-height:28px;
   }
   </style>
   <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=PpQp4GA1HEAFU6Q4NR6soGlj0PhtmHKj"></script>
   <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
   <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />

   </head>
   <body>
       <div id="allmap">
   </div>
   <div id="result">


   </div>
<script type="text/javascript">
       // 百度地图API功能
var map = new BMap.Map('allmap');
var poi = new BMap.Point(113.776043,34.776235);
map.centerAndZoom(poi, 20);
   var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
   var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件
   var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL});
   //添加控件和比例尺
   map.addControl(top_left_control);
   map.addControl(top_left_navigation);
map.enableScrollWheelZoom();
   map.addControl(new BMap.MapTypeControl({
       mapTypes:[
               BMAP_NORMAL_MAP,
               BMAP_SATELLITE_MAP
       ]
   }

   )); //添加地图类型控件
   map.setMapType(BMAP_SATELLITE_MAP);
var content = '<div style="margin:0;line-height:20px;padding:2px;">' + '地铁一号线到东风南路站' +
'</div>';

//创建检索信息窗口对象
var searchInfoWindow = null;
   searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
           title : "中智河南经济技术合作有限公司", //标题
           width : 290, //宽度
           height : 40, //高度
           panel : "panel", //检索结果面板
           enableAutoPan : true, //自动平移
           searchTypes :[
               BMAPLIB_TAB_SEARCH, //周边检索
               BMAPLIB_TAB_TO_HERE, //到这里去
               BMAPLIB_TAB_FROM_HERE //从这里出发
           ]
       });
var marker = new BMap.Marker(poi); //创建marker对象
   marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
marker.enableDragging(); //marker可拖拽
   searchInfoWindow.open(marker);
map.addOverlay(marker); //在地图中添加marker
   var label = new BMap.Label("中智河南经济技术合作有限公司",{offset:new BMap.Size(20,10)});
   marker.setLabel(label);
</script>
   </body>
</html>