如何在网页中嵌入百度地图

最近在做的事情是给一个刚起步的公司做一个官网来展示其企业相关的信息及产品信息。其中碰到一个需求就是在介绍企业的各种联系方式时需要在页面上给出一个在线的地图，地图上能够标示出企业的位置。如果让人从0开始我觉得没几个人能搞出来吧，不过百度地图开放平台提供了强大的工具帮助我们实现这个需求。

按照下述几个步骤，你就能轻松地在自己的网页上嵌入一个百度地图啦（这里假设大家都有baidu账号了，没有的话赶紧注册吧）

step1：获取密钥

为了统一平台服务的配额管理，JavaScript API在新版本引入ak机制。JavaScript API v1.4及以前版本无须申请密钥（ak），自v1.5版本开始需要先申请密钥（ak），才可使用。申请密钥的链接：点击打开链接

打开链接后点击创建应用，填入相关的信息，填完后是这个样子

点击提交后就知道自己的密钥啦

step2:用百度提供的地图生成器工具，链接：点击打开链接

step3:生成一个地图，并进行相关的配置

比如我一直想去重庆吃火锅，那就以重庆解放碑为标的点好啦

1.定位中心点，输入城市（重庆），地点（解放碑）

2.设置地图，设置地图的一些配置，参数

3.添加标注，在右边会有根据你的配置生成的地图，选择一种标记，在地图上找到你想要标注的位置，添加标注信息就好

step4:点击获取代码，会跳出来一个框里显示你创建的地图的HTML代码，copy最核心的代码到你的页面中，然后把第一个script标签下的你的密钥换成step1中获得的密钥就可以啦。下面的这几句是最核心的

<!--引用百度地图API-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密匙"></script>

<!--百度地图容器-->
    <div style="width:700px;height:550px;border:#ccc solid 1px;font-size:12px" id="map"></div>

<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap(){
      createMap();//创建地图
      setMapEvent();//设置地图事件
      addMapControl();//向地图添加控件
      addMapOverlay();//向地图添加覆盖物
    }
    function createMap(){ 
      map = new BMap.Map("map"); 
      map.centerAndZoom(new BMap.Point(106.616393,29.587973),14);
    }
    function setMapEvent(){
      map.enableScrollWheelZoom();
      map.enableKeyboard();
      map.enableDragging();
      map.enableDoubleClickZoom()
    }
    function addClickHandler(target,window){
      target.addEventListener("click",function(){
        target.openInfoWindow(window);
      });
    }
    function addMapOverlay(){
      var markers = [
        {content:"好想去吃火锅",title:"重庆解放碑",imageOffset: {width:0,height:3},position:{lat:29.563503,lng:106.583641}}
      ];
      for(var index = 0; index < markers.length; index++ ){
        var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
        var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
          imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
        })});
        var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
        var opts = {
          width: 200,
          title: markers[index].title,
          enableMessage: false
        };
        var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
        marker.setLabel(label);
        addClickHandler(marker,infoWindow);
        map.addOverlay(marker);
      };
    }
    //向地图添加控件
    function addMapControl(){
      var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
      scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
      map.addControl(scaleControl);
      var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
      map.addControl(navControl);
      var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:false});
      map.addControl(overviewControl);
    }
    var map;
      initMap();
</script>

这样就能刷新你的界面并得到一个地图啦，改地图的大小也很简单，把地图的容器，那个div的width 和 height改了适应你的页面的大小就好啦。很简单，我就不贴出我的实例啦。

如果觉得文章还不错的话，慷慨地打赏一下就更好啦~

扫描左侧二维码（支付宝微信均可），多少随意哦，。多谢啦，愿你天天进步~

如何在网页中嵌入百度地图

猜你喜欢