我想在木有提供地图接口的年代，前端工程师门要么只写上企业的具体地址，要么就是用一张标有自己位置的地图图片。但是现在不一样啦！为了增强用户体验，谷歌，甚至百度都很开放了，你可以在他们的网站上找到地图接口，通过进行直接的调用就可以了。

下面我来教你怎么在网页中用好百度地图，当然了，你也可以去百度地图网站去查找相关的技术资料。

首先你需要进入到百度地图官网 。因为我们是用的脚本进行加载的，所以我们要选择上图中的第一个“javascript api”，进去之后你会发现它的功能很强大有木有？

这里只是它的冰山一角。你可以在最下面“开始体验”。里面有源代码，你可以获取，然后放入到你的网页当中去。不过我今天讲的不是这么简单的。

    
     // 百度地图API功能var map = new BMap.Map('map');var poi = new BMap.Point(116.307852,40.057031);map.centerAndZoom(poi, 16);map.enableScrollWheelZoom();var content = '
     
      ' +'
      ' +'地址：北京市海淀区上地十街10号
      
电话：(010)59928888
      
简介：百度大厦位于北京市海淀区西二旗地铁站附近，为百度公司综合研发及办公总部。' +'';//创建检索信息窗口对象var searchInfoWindow = null;searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {title  : "百度大厦",      //标题width  : 290,             //宽度height : 105,              //高度panel  : "panel",         //检索结果面板enableAutoPan : true,     //自动平移searchTypes   :[BMAPLIB_TAB_SEARCH,   //周边检索BMAPLIB_TAB_TO_HERE,  //到这里去BMAPLIB_TAB_FROM_HERE //从这里出发]});var marker = new BMap.Marker(poi); //创建marker对象marker.enableDragging(); //marker可拖拽marker.addEventListener("click", function(e){searchInfoWindow.open(marker);})map.addOverlay(marker); //在地图中添加markersearchInfoWindow.open(marker); //在marker上打开检索信息串口$("close").onclick = function(){searchInfoWindow.close();}$("open").onclick = function(){var enableSendToPhone = false;if ($("enableSendToPhone").checked) {enableSendToPhone = true;}searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {title  : "百度大厦",      //标题width  : 290,             //宽度height : 105,              //高度panel  : "panel",         //检索结果面板enableAutoPan : true,     //自动平移enableSendToPhone: enableSendToPhone, //是否启用发送到手机searchTypes   :[BMAPLIB_TAB_SEARCH,   //周边检索BMAPLIB_TAB_TO_HERE,  //到这里去BMAPLIB_TAB_FROM_HERE //从这里出发]});if ($("enableAutoPan").checked) {searchInfoWindow.enableAutoPan();} else {searchInfoWindow.disableAutoPan();};searchInfoWindow.open(marker);}$("show").onclick = function(){searchInfoWindow.show();}$("hide").onclick = function(){searchInfoWindow.hide();}$("getPosition").onclick = function(){var position = searchInfoWindow.getPosition();alert("经度：" + position.lng + "；纬度：" + position.lat);}$("setValue").onclick = function(){searchInfoWindow.setPosition(new BMap.Point($("lng").value, $("lat").value));searchInfoWindow.setTitle($(“title”).value);searchInfoWindow.setContent($(“content”).value);}$("getContent").onclick = function(){alert(searchInfoWindow.getContent());}$("getTitle").onclick = function(){alert(searchInfoWindow.getTitle());}function $(id){return document.getElementById(id);}//样式1var searchInfoWindow1 = new BMapLib.SearchInfoWindow(map, "信息框1内容", {title:"信息框1", //标题panel : "panel", //检索结果面板enableAutoPan : true, //自动平移searchTypes :[BMAPLIB_TAB_FROM_HERE, //从这里出发BMAPLIB_TAB_SEARCH   //周边检索]});function openInfoWindow1() {searchInfoWindow1.open(new BMap.Point(116.319852,40.057031));}//样式2var searchInfoWindow2 = new BMapLib.SearchInfoWindow(map, "信息框2内容", {title: "信息框2", //标题panel : "panel", //检索结果面板enableAutoPan : true, //自动平移searchTypes :[BMAPLIB_TAB_SEARCH   //周边检索]});function openInfoWindow2() {searchInfoWindow2.open(new BMap.Point(116.324852,40.057031));}//样式3var searchInfoWindow3 = new BMapLib.SearchInfoWindow(map, "信息框3内容", {title: "信息框3", //标题width: 290, //宽度height: 40, //高度panel : "panel", //检索结果面板enableAutoPan : true, //自动平移searchTypes :[]});function openInfoWindow3() {searchInfoWindow3.open(new BMap.Point(116.328852,40.057031));}var isPanelShow = false;//显示结果面板动作$("showPanelBtn").onclick = function(){if (isPanelShow == false) {isPanelShow = true;$("showPanelBtn").style.right = "300px";$("panelWrap").style.width = "300px";$("map").style.marginRight = "300px";$("showPanelBtn").innerHTML = "隐藏检索结果面板
      
>";} else {isPanelShow = false;$("showPanelBtn").style.right ="0px";$("panelWrap").style.width = "0px";$("map").style.marginRight = "0px";$("showPanelBtn").innerHTML = "显示检索结果面板
      
<";}}
     
    

别以为这样就ok啦，还有这些也是需要滴！ 

<script type=”text/javascript” src=”v=1.5&ak=2b866a6daac9014292432d81fe9b47e3“></script>

来看看效果：

这里有些地方是可以更改的var poi = new BMap.Point(116.307852,40.057031);用来修改你具体位置在地图上的坐标点；map.centerAndZoom(poi, 16);可以用来显示地图层的，在地图上滚动你的滑轮你注意下就知道了。

要是我不知道我的具体位置的坐标点或者我想把地点弄的更精确怎么办？

你可以用坐标拾取工具，或者是用快速生成工具

怎么样？这样的用户体验是不是蛮拉轰的？

http://my.oschina.net/u/1995422/blog/308380