简单的使用百度地图
来源：互联网 发布：现货数据行情分析 编辑：程序博客网 时间：2024/05/16 06:26
开发百度地图之前，首先要申请一个百度地图的密钥，这个密钥会在程序中用到. 具体的地址是http://lbsyun.baidu.com/apiconsole/key
<!DOCTYPE html><html> <head> <title>test.html</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <!--这里要引入密钥--> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=密钥"> </script> <script type="text/javascript"> //创建百度地图 var creat_map = function(longitude, latitude){ var map = new BMap.Map("container"); // 创建地图实例 var point = new BMap.Point(116.404, 39.915); // 创建点坐标 //var point = new BMap.Point(longitude,latitude); var marker = new BMap.Marker(point); // 创建标注 map.centerAndZoom(point, 15); // 地图放大级数，数字越大，地图显示越大 map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用 map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件 map_click(map); } // 创建3D百度地图 var creat_tdMap = function(longitude, latitude){ var map = new BMap.Map("container", {mapType:BMAP_PERSPECTIVE_MAP}); //设置3D图为底图 var point = new BMap.Point(116.404, 39.915); var marker = new BMap.Marker(point); map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的 map.centerAndZoom(point,19); map.enableScrollWheelZoom(true); //启用滚轮放大缩小 map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件 map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL})); //右上角，仅包含平移和缩放按钮 map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, type: BMAP_NAVIGATION_CONTROL_PAN})); //左下角，仅包含平移按钮 map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM})); //右下角，仅包含缩放按钮 map.addOverlay(marker); map_click(map); } //地图点击事件 var map_click = function(map){ map.addEventListener("click", function(e){ var opts = { width : 300, // 信息窗口宽度 height: 150, // 信息窗口高度 title : "<label style='font-size:15px;color:blue;'>*当前位置的信息*<label>" // 信息窗口标题 } var details = "Andy is so handsome!"; var infoWindow = new BMap.InfoWindow(details, opts); // 创建信息窗口对象 map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口 }); } //window.onload = creat_map; //window.onload = creat_tdMap; </script> <style type="text/css"> #bottom, #container {float:none; width:800px; height:500px; margin:0 auto;} </style> </head> <body> <div id="container"></div> <div id="bottom"> <input type="button" value="打开普通地图" onclick="creat_map();"> <input type="button" value="打开3D地图" onclick="creat_tdMap();"> </div> </body></html> 0 0
- 简单的使用百度地图
- 百度地图的简单使用
- 百度地图的简单使用
- 百度地图简单使用
- 百度地图 - 简单使用
- 百度地图的集成和简单使用
- 安卓百度地图的简单使用
- 百度地图的简单使用与定位
- 【html5百度地图】简单使用
- iOS百度地图简单使用
- Android 百度地图简单使用
- 百度地图api简单使用
- 百度地图的使用
- 百度地图的使用
- 百度地图的使用
- 百度地图的使用
- 百度地图的使用
- 百度地图的简单应用
- 重学Java之环境变量（path和classpath）
- 深度学习（二十二）Dropout浅层理解与实现
- android studio 下载地址
- 命令模式（heade first设计模式读书笔记）
- 跳转界面传递数据
- 简单的使用百度地图
- 灰来灰去-设计的那些事儿
- 23种设计模式（18）_行为型_备忘录模式（Memento Pattern）
- AVFoundation学习Demo--拍摄照片
- STM32 USB数据发送完成的识别方法
- 网络传输层TCP协议中InputStream的read方法是否返回-1
- mysql登录出错
- javascript-工厂模式创建
- cf #308 E. Vanya and Brackets （暴力枚举）
