在进行Java开发的学习之前个人掌握了web前端开发的技术,这使得在学习Java开发的时候显得得心应手,因为编程的思想是统一的不同的只有语法和关键词.
下面我来为大家讲述一下个人的前端开发实例:
在进行web的开发过程中,如果需要调用百度地图,那么请先申请一个百度地图API的使用密钥,需要百度地图API密钥申请的请点开链接:http://jingyan.baidu.com/article/363872eccda8286e4aa16f4e.html
在我开发的web应用中,使用到了百度地图API,使用过程如下:
(1)创建HTML网页文档,并设置网页结构。
(2)编辑css文件,并在HTML文件中引入该文件,完成页面布局。
(3)创建js文件,在HTML文件中引入该文件和百度地图的API。
基于百度地图的web应用开发实例中百度地图的引入
(4)编写js文件,进行地图的操作:
var map = new BMap.Map("mapview", {minZoom:4,maxZoom:13}); // 创建Map实例
map.centerAndZoom("郑州",6); // 初始化地图,用城市名设置地图中心点
var maptype = new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}); map.addControl(maptype);//设置地图类型为卫星图
map.enableScrollWheelZoom(true);//设置地图缩放控件
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});
map.addControl(top_left_control);//设置选择位于左上角的比例尺
var overView = new BMap.OverviewMapControl(); var overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
map.addControl(overView); //添加默认缩略地图控件
map.addControl(overViewOpen);
//右下角,打开
var menu = new BMap.ContextMenu(); var txtMenuItem = [ { text:'放大', callback:function(){map.zoomIn()} }, { text:'缩小', callback:function(){map.zoomOut()} } ];
for(var i=0; i < txtMenuItem.length; i++)
{ menu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100)); }
map.addContextMenu(menu); //添加右键菜单
这是在引入密钥以及完成对百度地图属性设置以后的界面:
基于百度地图的web应用开发实例中百度地图的引入
此时我们对于百度地图的引入就已经结束了。百度地图的功能远不止此,详情请点击以下链接:
http://lbsyun.baidu.com/jsdemo.htm#b0_2
|
|