网站联系我们页面添加百度地图API的方法其实很简单！

现在进行网站推广的网站一般都是企业网站，而作为一个企业营销网站必不可少的组成部分当然就是联系我们页面，可以说良好的联系我们页面可以让客户更好的联系到企业，由此可见制作好网站联系我们页面有多么重要，通常网站联系我们页面做的越详细效果也就越好，有许多企业经常会想要把底图也放到联系我们页面，这样客户造访时就可以通过底图快速的找到企业，但受制于技术瓶颈，许多企业人员都不知道该怎么进行添加，下面西德SEO就教给大家网站联系我们页面添加百度地图API的方法，真正学会后就会发现其实很简单!

之所以要添加百度地图API是因为目前地图使用较为广泛的当然是百度地图，况且百度地图的地点与精确度也相对其他地图APP而言相对较好，下面我们步入正题详细讲解“网站联系我们页面添加百度地图API的方法”.

第一步、首先我们登陆百度地图开放平台 网址为 http://lbsyun.baidu.com/ 登陆任意百度账号

第二步、点击控制台，在左侧的应用管理下点击我的应用，并在右侧窗口点击创建应用的红色按钮

第三步、给应用填写一个应用名称 选择应用类型为 浏览器端 Referer白名单设置 需要添加百度地图AIP的网站域名，这里需要注意填写后只有相关域名才可以进行调用，其他域名均不可以调用，你可以将域名设置为 *.seocid.com 这种格式，从而使得以seocid.com为一级域名的二级域名均可以调用，当然你也可以不进行设置，那么你的百度地图API将会是一个开放的API任何网站都可调用，这里建议还是设置的比较好.

第四步、点击提交按钮完成添加应用的操作，你会获得一个访问应用的AK码这个需要记录.

第五步、而后将鼠标移动到导航栏的 开发文档 选择开发者工具中选择地图生成器.

第六步、首先切换当前城市为自己的城市，输入地名、大厦快速定位，而后设置地图的尺寸、按钮显示、地图状态最后添加标注.

第七步、都设置完成后点击获取代码既可以获得百度API的代码，不过我们需要将代码进行一个修改，以下使西德SEO随机生成的一个百度AIP的代码信息，并进行了注释，想要在网站联系我们页面添加百度地图API的同学可以根据自己的需要设置!

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=这里填写第四步时获取的应用AK码"></script>

<!--设置百度地图的样式，这里width是长度，height是高度，也可以自己随意添加样式，如果你懂样式-->
<style type="text/css">
.baidu-map{width:100%;height:auto;}
</style>
<!--style end-->
<!--百度地图容器-->
<div class="baidu-map" id="map"></div>
<!--地图容器结束-->

<!--将以下代码填写在 </body> 前-->
<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap(){
      createMap();//创建地图
      setMapEvent();//设置地图事件
      addMapControl();//向地图添加控件
      addMapOverlay();//向地图添加覆盖物
    }
    function createMap(){ 
      map = new BMap.Map("map"); 
      map.centerAndZoom(new BMap.Point(114.396656,36.109968),16);
    }
    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:36.109176,lng:114.395906}}
      ];
      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:true});
      map.addControl(overviewControl);
    }
    var map;
      initMap();
  </script>
<!--百度地图调用js结束-->

一切OK后我们就可以将代码添加到网站联系我们页面想要添加百度地图API的地方，保存后刷新网站的联系我们页面会发现自己公司的百度地图已经跃然显示在我们的网站上，所谓会者不难、难者不会，当真正学会了网站联系我们页面添加百度地图API的方法后是不是觉得其实很简单呀!

未经允许不得转载：西德SEO » 网站联系我们页面添加百度地图API的方法其实很简单！