在网页中接入百度地图

百度地图API点击打开链接

打开百度地图API图如下

第一步创建地图：

1.查找所要定位的地方，2.中心点纬度可以用鼠标拖拽地图设置，3.当前地图级别即是地图缩放级别

第二步设置地图：

这里其实默认设置即可，等一下可以直接用代码改地图参数。

第三步添加标注

1.添加点标记，在地图中按鼠标左键即可标记位置，左面设置参数并且保存。(可设置多个标注)

2.线标记，这里画线标注怎么到达“我的位置”，左边可设置参数。(可设置多条线标记)

3.文字标记，这里给画线添加备注，左边设置文字。(可设置多个文字标记)

第四步获取代码复制到html里面

运行代码，然后发现网页出现乱的字符，并且标记的图标没显示出来，没关系我们开始改代码。

1.在head标签里把charset改成中文国际标准utf-8

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

2.下面代码可以改标记图标路径，这里我改成自己想要的

//创建一个Icon    function createIcon(json){        var icon = new BMap.Icon("img/mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})        return icon;    }

3.设置图标在地图的位置和大小(一般图有多大，w和h就设置多大)

//标注点数组    var markerArr = [{title:"我的位置",content:"地址：腾讯大厦<br/><br/>电话：88888888<br/><br/>联系人：测试猫",point:"113.941079|22.546052",isOpen:1,icon:{w:38,h:38,l:0,t:0,x:16,lb:15}} ];

效果出来了，点开看见我的信息。

这样百度地图的接入完成了，当然有很多参数可以自行修改，例如地图在网页中的大小，在div标签里改即可等等。。现在你可以把js封装成一个脚本，然后在html里引入封装的js代码，在html中插入<!--百度地图容器--><div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>。

当然这里引入封装的javascript脚本有一个重要事项：1.api的key  <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>  要在head标签里引入，而你copy过来的那些javascript代码封装成的脚本，要在</body>结束标签后引入，否则百度地图的接入无效哦，这个是经过测试的，必须要等html的body内容加载完才能加载百度地图。要不你也可以试试在head里引入封装脚本，加个defer="defer"属性延迟加载应该也是可以的。