简单使用网页中插入百度地图的方法
2017-05-20 19:38
281 查看
方法/步骤
1、打开“百度地图生成器”的网址:百度地图生成器如下图:
2、在“1.定位中心点”中,切换城市,并查找具体位置,如下图:
3、在“2.设置地图”中,可以按照自己的喜好修改地图的外观:
a、地图的宽和高
b、地图上显示的按钮(缩放、缩略图、比例尺)
c、鼠标和键盘对地图的操作
如下图:
4、在“3.添加标注”中,可以添加自己想要标注的位置和信息,如下图:
5、在“第二步 获取代码”中,点击“获取代码”按钮,就会弹出根据上面的设置生成代码,如下图:
6、把上一步生成的代码保存为html文件(我这里保存为map.html),在浏览器中打开就可以看到自己定义的百度地图了。
如果要把地图添加到现有的网页中,可以使用iframe标签,如:
<iframe src="map.html" width="600" height="300" frameborder="0" scrolling="no"></iframe>
附:地图代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="keywords" content="百度地图,百度地图API,百度地图自定义工具,百度地图所见即所得工具" /><meta name="description" content="百度地图API自定义地图,帮助用户在可视化操作下生成百度地图" /><title>百度地图API自定义地图</title><!--引用百度地图API--><style type="text/css"> html,body{margin:0;padding:0;} .iw_poi_title {color:#CC5522;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}</style><script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script></head><body> <!--百度地图容器--> <div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div></body><script type="text/javascript"> //创建和初始化地图函数: function initMap(){ createMap();//创建地图 setMapEvent();//设置地图事件 addMapControl();//向地图添加控件 } //创建地图函数: function createMap(){ var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图 var point = new BMap.Point(116.057307,39.792189);//定义一个中心点坐标 map.centerAndZoom(point,9);//设定地图的中心点和坐标并将地图显示在地图容器中 window.map = map;//将map变量存储在全局 } //地图事件设置函数: function setMapEvent(){ map.enableDragging();//启用地图拖拽事件,默认启用(可不写) map.enableScrollWheelZoom();//启用地图滚轮放大缩小 map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写) map.enableKeyboard();//启用键盘上下左右键移动地图 } //地图控件添加函数: function addMapControl(){ //向地图中添加缩放控件 var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE}); map.addControl(ctrl_nav); //向地图中添加缩略图控件 var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1}); map.addControl(ctrl_ove); //向地图中添加比例尺控件 var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT}); map.addControl(ctrl_sca); } initMap();//创建和初始化地图</script></html>
相关文章推荐
- 网页中插入百度地图的方法
- 在网页中插入百度地图(最方便的方法3分钟搞定)!
- jsp中使用POST的方法在网页之间传递参数的简单方法
- 用瀑布流的方式在网页上插入图片的简单实现方法
- 夺命雷公狗----网页版百度地图使用最新方法
- 第150天:网页中插入百度地图方法(需要密钥)
- 第151天:网页中插入百度地图方法(不需要密钥)
- 2种在vue项目中使用百度地图的简单方法
- 简单了解Effective java - 第7条 避免使用终结方法
- 【drp 11】使用Junit简单测试接口方法
- 实用的简单PHP分页集合包括使用方法
- React Native中TabBarIOS的简单使用方法示例
- BigInteger简单使用及方法总结
- 百度地图-使用AndroidStudio获取 SHA1 MD5的方法
- javascript的document.execCommand方法简单地使用
- 简单的html静态网页使用libevent
- 最简单的Photoview使用方法
- 多线程并发中的简单使用wait和notify的方法
- 最简单实现跨域的方法----使用nginx反向代理
- 最简单使用的配置登录拦截器(过滤器)的方法(SSH)