HTML5地理定位与第三方工具百度地图的应用
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <script type="text/javascript" src=http://www.jb51.net/html5/"http:/api.map.baidu.com/api?v=2.0&ak=jrbPiu6jcbPsxGvdQXAc0C......"> //v2.0版本的引用方式：src="?v=2.0&ak=您的密钥" //v1.4版本及以前版本的引用方式：src="?v=1.4&key=您的密钥&callback=initialize" </script> <style> #container{ width: 800px; height: 500px; } </style> </head> <body> <h1>使用百度地图</h1> <div id="container"></div> <script type="text/javascript"> // 创建地图实例，避免与Map重名，所以使用BMap.Map var map = new BMap.Map("container"); // 创建点坐标 var point = new BMap.Point(113.946317,22.549008); // 初始化地图，设置中心点坐标和地图级别 1~18级 map.centerAndZoom(point, 18); //鼠标滚动，地图缩放 map.enableScrollWheelZoom(true); //添加地图控件 map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.OverviewMapControl()); map.addControl(new BMap.ScaleControl()); map.addControl(new BMap.MapTypeControl()); //添加地图标注 var marker=map.addOverlay(new BMap.Marker(point)); </script> </body> </html> 使用百度地图：
OK，我们成功的在HTML文件中使用了百度地图，现在可以像在中一样使用百度地图了！！ 相关函数说明： <script src=http://www.jb51.net/html5/"http:/api.map.baidu.com/api?v=2.0&ak=您的网站在百度地图申请的访问秘钥 "> </script> 在ak中输入刚才得到那一长串密钥即可引用百度地图！！ 创建地图实例 --必选。 var map = new BMap.Map("container"); 创建一个指定的点 ，你的经纬度信息！！如果不知道可以使用前面的 var point = new BMap.Point(116.300982,39.915907); 以指定点为中心显示地图 数字17指的是层级，层级可以分为1~18级，层级越小地图看的范围越大，层级越大看的范围越大，自己可以测试一下不同层级显示的地图效果！！---必选。 map.centerAndZoom(point, 17); 地图可以随着鼠标自由的缩放---可选。 map.enableScrollWheelZoom(true); 地图显示控件--效果自己测试，这里不是主要函数不再加以说明---可选。 map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.OverviewMapControl()); map.addControl(new BMap.ScaleControl()); map.addControl(new BMap.MapTypeControl()); 地图上显示一个标注(标注)--可选 var marker=map.addOverlay(new BMap.Marker(point)); OK，第三方百度地图就说到这里，还有许多好玩的函数可以自己使用，所以方法和参数都在API中可以找到！ （编辑：焦作站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
