已经很久没更新博客了，因为最近一直在学习前端的知识，没那么多时间，写博客或者写文章不但没有钱，写得好还好说，如果写得不好，一些吃瓜群众，不仅要喷你，搞不好还要人身攻击就不好了。所以写博客的人，脸皮得厚，像我这样，任凭骂我千百遍，我依旧坚持写，也不怕侮辱了谁的眼睛，哈哈~我发现有些做技术比较厉害的人，多少都有些脾气，你永远不知道他什么时候突然就消失在园子里了......
在使用百度地图之前，我们要先去百度开放平台申请ak。地址：http://lbsyun.baidu.com/
填写开发者认证信息，你可以以个人名义，也可以以公司名义申请一个秘钥，企业开发者认证功能更加强大。在前期做技术开发，我们通常以个人名义申请一个秘钥，等以后项目要上线的时候切换到企业的秘钥就可以了。在进行认证的时候，可能会遇到一些问题，比如说：手机号已经注册，这表示，你曾经申请过，你可以找出你曾经申请时使用的百度账号，用那个账号进行登录。有些人不知道如何填写使用场景信息，这项要求写200字以上。我提供一个Demo仅供参考：
我们公司是做物联网节能的，现在公司的项目需要使用到百度地图，前期技术调研，需要先以开发者个人的名义注册一个账号进行开发用，后面会以公司的名义重新申请百度开发者账号，主要用于医院、商场等大型建筑的地图定位以及手机端维修工人的位置定位
，以方便清楚维修工人所在的地理位置。我们希望可以在系统中定位到具体某一座城市的大型建筑，并能够缩放建筑二维平面图的大小，以及定位到使用公司App的运维人员所在的位置，方便安排就近的员工对建筑中需要维修的设备进行维修和保养工作。基于以上的需求，
需要应用到贵公司的百度地图服务，还望批准！不甚感谢！
填写完认证信息之后，三五个工作日之内，就会审核，审核通过后，你就可以去创建应用了。
如果你是BS项目中使用，你的应用类型选择“浏览器端”
用百度地图生成器，去生成代码，地址：http://api.map.baidu.com/lbsapi/creatmap/index.html
将生成的代码，直接复制粘贴到项目页面中就可以使用，但是生成的代码毕竟是生成的，你需要自己进行重构。
你还可以去百度API示例中去寻找例子，然后进行修改，改造成你需要的样子。地址：http://developer.baidu.com/map/jsdemo.htm#c1_3
假如我要做成下面的效果：
可以看出是要添加多个覆盖物，注意，这不是信息窗口，因为信息窗口只能在页面中显示一个，而且使用信息窗口有一个很蛋疼的事情，那就是信息窗口的最小宽度是250px，你无法修改。
在母版页中添加百度api引用
<script type="text/javascript" src="http://api.map.baidu.com/api?ak=你的秘钥&v=2.0"></script>
需要注意的是要在jquery.js之前引用，否则会有冲突。
View视图代码如下：
@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Form.cshtml"; } <!--引用百度地图API--> <div style="margin-bottom:5px;"> <input class="form-control input-inline" id="txtWords" placeholder="搜索地区" value="" type="text" /> <button id="btnSearch" class="btn sbold yellow-casablanca" onclick="searchMap();"> <i class="fa fa-search"></i>搜索地图 </button> </div> <!--百度地图容器--> <div style="width:697px;height:550px;border:#ccc solid 1px;" id="mapContent"></div> @section scripts { <script src="~/Content/js/common/base-BaiduMap.js"></script> <script type="text/javascript"> //标注点数组 var markerArr = [ { title: "紫衡技术", electricity: "0kwh", water: "1吨", air: "0m³", alarm: "2次", point: "114.011944|22.602072", isOnline: 0 }, { title: "银谷科技", electricity: "10kwh", water: "2吨", air: "30m³", alarm: "1次", point: "114.011086|22.601413", isOnline: 0 } ]; BaiduMapObj.init("mapContent", 114.011944, 22.602072, markerArr,19);//创建和初始化地图 function searchMap(){ BaiduMapObj.searchMap("mapContent","txtWords",markerArr); } </script> }
css样式我放到独立的样式文件中，通过母版页进行引入
/*--------------百度地图----------------*/ .iw_poi_title { color: white; font-size: 14px; font-weight: bold; overflow: hidden; padding-right: 13px; white-space: nowrap; } .iw_poi_content { font: 12px arial,sans-serif; overflow: visible; padding-top: 4px; white-space: -moz-pre-wrap; word-wrap: break-word; } .OverlayInsideDiv{position:absolute;height:140px;width:130px;overflow:hidden;opacity:0.9;} .OverlayInsideDiv p{ margin: 5px 0 0;padding: 0;color:#3B9B8B;} .OverlayInsideDiv p span{color:#8B8E93;}
将要使用的js进行封装，base-BaiduMap.js代码如下：
View Code
你会发现在js代码的最顶部，我添加了如下代码：
//# sourceURL=base-BaiduMap.js
这是因为我项目是使用ajax布局，动态加载页面和页面的js的，所以如果你不添加此代码，在浏览器中将无法进行调试，因为浏览器的调试器中将看不到这个动态加载进来的js文件。sourceURL=后面的是别名，通常和文件名一致方便区分。把这个功能模块的js全部封装到一个对象中，这样就只暴露了一个全局变量入口。我前端js这一块很戳，被以前公司的前端说“基础太差”，所以大家将就着看，毕竟我现在还是一个准初级前端工程师......
这实在是太简单了，没什么好讲的，只是有一点，大家在写代码的过程中，尽量做到不要重复你的代码，这是最最基本的原则。
其实，使用一些第三方的API，真的很简单，你只需要先大概过一遍API文档，知道它能做什么，然后你需要哪方面的功能，就再专门细看一下这块的功能文档和示例，然后自己照着改就可以了。
本文转自邹琼俊博客园博客，原文链接：http://www.cnblogs.com/jiekzou/p/7427843.html，如需转载请自行联系原作者
