在使用百度地图之前,我们要先去百度开放平台申请ak。地址:http://lbsyun.baidu.com/
填写开发者认证信息,你可以以个人名义,也可以以公司名义申请一个秘钥,企业开发者认证功能更加强大。在前期做技术开发,我们通常以个人名义申请一个秘钥,等以后项目要上线的时候切换到企业的秘钥就可以了(你也可以利用强大的百度找一些秘钥) 一般填写完认证信息之后,三五个工作日之内,就会审核,审核通过后,就可以去创建应用了。
用百度地图生成器,去生成代码,地址:http://api.map.baidu.com/lbsapi/creatmap/index.html
将生成的代码,直接复制粘贴到项目页面中就可以使用,但是生成的代码毕竟是生成的,你需要自己进行重构。
你还可以去百度API示例中去寻找例子,然后进行修改,改造成你需要的样子。地址:http://developer.baidu.com/map/jsdemo.htm#c1_3
下面是我做的一个简单的例子,你只要拷贝下来,然后把自己的秘钥填上就好了。
1 @{ 2 Layout = null; 3 } 4 5 <!DOCTYPE html> 6 <html> 7 <head> 8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 9 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 10 <style type="text/css"> 11 body, html, #allmap { 12 100%; 13 height: 100%; 14 overflow: hidden; 15 margin: 0; 16 font-family: "微软雅黑"; 17 } 18 </style> 19 <title>异步加载地图</title> 20 </head> 21 <body> 22 <div id="allmap"></div> 23 </body> 24 </html> 25 <script type="text/javascript"> 26 //百度地图API功能 27 function loadJScript() { 28 var script = document.createElement("script"); 29 script.type = "text/javascript"; 30 script.src = "//api.map.baidu.com/api?v=3.0&ak=PlhFWpA02aoURjAOpnWcRGqw7AI8EEyO&callback=init"; 31 document.body.appendChild(script); 32 } 33 function init() { 34 var map = new BMap.Map("allmap"); // 创建Map实例 35 var point = new BMap.Point(116.404, 39.915); // 创建点坐标 36 map.centerAndZoom(point,15); 37 map.enableScrollWheelZoom(); //启用滚轮放大缩小 38 } 39 window.onload = loadJScript; //异步加载地图 40 </script> 41 42 <html> 43 <head> 44 <meta name="viewport" content="width=device-width" /> 45 <title>Map</title> 46 </head> 47 <body> 48 <div> 49 </div> 50 </body> 51 </html>
这实在是太简单了,没什么好讲的,只是有一点,大家在写代码的过程中,尽量做到不要重复你的代码,这是最最基本的原则。
其实,使用一些第三方的API,真的很简单,你只需要先大概过一遍API文档,知道它能做什么,然后你需要哪方面的功能,就再专门细看一下这块的功能文档和示例,然后自己照着改就可以了。