根据百度地图API加载地图及控件

最新推荐文章于 2024-08-20 17:29:55 发布

lucky芬

最新推荐文章于 2024-08-20 17:29:55 发布

阅读量2.4k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/daimomo000/article/details/54923688

版权

JavaScript 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

没用过之前觉着百度地图的运用很神奇，其实看了API后以及一些相关文章，根据提示直接调用百度地图并出现预期效果后，就觉得没有想象中的难。所以遇到一些事的时候不要被未知所迷惑，要迎难而上，用于解决。下面引用了别人调用的百度地图例子：

<!DOCTYPE html>  
<html lang="en">  
    <head> 
        <meta charset="UTF-8"> 
        <title>百度地图</title>  
        <script src="http://api.map.baidu.com/api?v=1.3"></script>  
        <script type="text/javascript">  
        var map  
        function initialize() {    
            var opt ={maxZoom:50,zoom:1};//设置地图BMap的MapOptions参数              
            var map = new BMap.Map("map",opt); //地理坐标点  
            var map_Point = new BMap.Point(115.557844,35.3068723);  
            var map_Pixel = new BMap.Pixel(10, 10);  
            map.centerAndZoom(map_Point, 15);  
            //map.enableContinuousZoom();  
            var bounds = map.getBounds();//获取地图的范围  
              
            //地图导航控件  
            var nav_size = new BMap.Size(10,10);//地图导航控件的参数  
            var map_Control = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,offset:nav_size,type:BMAP_NAVIGATION_CONTROL_LARGE,showZoomInfo:true});  
            map.addControl(map_Control);  
              
            //缩略地图控件  
            var size = new BMap.Size(100,100);//缩略图控件的参数  
            var map_OverView = new BMap.OverviewMapControl({size:size,isOpen:true});  
            map.addControl(map_OverView);  
              
            //比例尺寸控件  
            var map_Scale = new BMap.ScaleControl({anchor:BMAP_UNIT_IMPERIAL,offset:new BMap.Size(80,15)});  
            map.addControl(map_Scale);  
              
            //公司信息尺寸控件  
            var map_CopyRight = new BMap.CopyrightControl({id:2});  
            map.addControl(map_CopyRight);  
              
            //切换地图类型的控件  
            var map_type = new BMap.MapTypeControl();  
            map.addControl(map_type);  
              
            //添加一个覆盖物  
            var overlay = new BMap.Marker(map_Point,{enableClicking:true});  
            overlay.show();  
            overlay.enableDragging();  
            var label = new BMap.Label("名字");  
            label.setOffset(new BMap.Size(0,20));  
            label.setTitle("名字");  
            label.addEventListener("mouseover",function(){this.setContent("这里是百度");});  
            label.addEventListener("mouseout",function(){this.setContent("名字");});  
            overlay.setLabel(label);  
              
            //infoWindow.enableCloseOnClick();  
            //infoWindow.setTitle("名字")           
            //当鼠标点击时打倒开InfoWindow  
            overlay.addEventListener(  
                "click",   
                function(){overlay.openInfoWindow(new BMap.InfoWindow("World",{title:"标题"}));}  
            );                
            map.addOverlay(overlay);  
            //应该在添加Marker后在打开InfoWindow才可以  
            var infoWindow= new BMap.InfoWindow("infoWindow");  
            overlay.openInfoWindow(infoWindow);  
              
        }  
        window.onload = initialize;  
    </script>  
    </head>  
    <body>  
        <div id="map" style="width: 1300px; height: 650px"></div>  
        <div id="infoWindow" style="width:50px;height:50px;border:1px solid #ccc;"></div>  
    </body>  
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  
  <title>首页视图</title>
  <!-- 引入css样式 -->
  <script src="common/css.js"></script>
  <!-- 引入js -->
  <script src="common/js.js"></script>
 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6c497f51c06477544e5fa6e9bd68f7c3"></script>
<style>
  body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
</head>
<body>
<section>
  <!-- 引入头部 -->
	<script src="common/head.js"></script>

  <!-- 地图展示 -->
  <div id="allmap"></div>

  
  <!--侧栏信息-->
   <div class="">
    <jsp:include page="index_dealer_side.jsp" flush="true"/>
  </div>
  
</section>
<script type="text/javascript">
 // 百度地图API功能
  var map = new BMap.Map("allmap");    // 创建Map实例
  map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
  map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
  map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
  map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
</script>
</body>
</html>