如何在网页中插入百度地图？

        本文是邓杰律师基于百度地图JS api v2.0版本进行的分享，主要操作步骤如下：

        一、访问http://lbs.baidu.com/apiconsole/key?application=key并向百度申请后面所要用到的ak值。

        二、找到并打开百度地图生成器网址，https://api.map.baidu.com/lbsapi/createmap/，创建你后面需要插入网页的百度地图源代码。

        三、找到并打开百度拾取坐标系统网址，https://api.map.baidu.com/lbsapi/getpoint/，查找你的目标地址精确经纬度坐标值，并对前一步代码中的坐标值进行修正调整。此时得到的，并经我修正后的示范代码如下，

        <!--插入百度地图开始-->

        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=向百度申请自己的ak值并填入"></script>

     <div style="width:100%;height:490px;border:#ccc solid 1px;font-size:12px" id="baidumap"></div>

<script type="text/javascript">

    //创建和初始化地图函数：

    function initMap(){

      createMap();//创建地图

      setMapEvent();//设置地图事件

      addMapControl();//向地图添加控件

      addMapOverlay();//向地图添加覆盖物

    }

    function createMap(){ 

      map = new BMap.Map("baidumap"); 

      map.centerAndZoom(new BMap.Point(113.961067,22.548372),19);

    }

    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:"地址：深圳市南山区科发路19号华润置地大厦D座19楼<br>联系人：邓杰律师<br>电话：13715198118",title:"北京市炜衡（深圳）律师事务所",imageOffset: {width:-46,height:-46},position:{lat:22.548371,lng:113.961051}}

      ];

      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("https://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: 300,

          title: markers[index].title,

          enableMessage: false

        };

        var infoWindow = new BMap.InfoWindow(markers[index].content,opts);

map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口

        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>

<!--插入百度地图结束-->

        四、将上述代码查到入到所需网页中，检查所调用的百度地图是否正常。本实例演示网址为：https://www.mygreen.cn/contact/。如遇到以下两个问题，可按本律师分享的经验排除故障；

       1、调用百度地图处显示一片空白。

        经排查，可能是你的网站启用了https，这时得将你获取的百度地图代码中的http修改成https。百度地图代码默认以http协议方式调取。

        2、调用的百度地图无法显示图片。

        经排查，可能是你的网站css通用设置中，对img设置了max-width: 100%属性并作用于百度地图从而导致百度地图调用的图片撑破页面导致出现问题。为此，我们解决的思路是阻止css中具有全局性影响的img类的max-width属性值对百度地图起作用，即将其属性值100%调整为固定像素值，需要注意的是该固定值务必要大于放置百度地图DIV容器的固定宽度，否则，百度地图中的文本提示信息框的向下箭头将无法正常显示。比较保险的做法是将该固定值设置为大于等于你网站允许的最大宽度，示范代码如下：

#baidumap img {

max-width: 1120px!important;

}

        五、如果你有自己的个性需要，参考官方提供的指引进行个性化定制。

https://lbsyun.baidu.com/index.php?title=jspopular3.0

https://lbsyun.baidu.com/jsdemo3.0.htm

        以上为邓杰律师从事网站前端开发经验分享，如您有任何疑问可加邓杰律师微信进行沟通交流。