黑马程序员技术交流社区

标题: Java开发基础-web前端的应用开发 [打印本页]

---

作者: 王进科    时间: 2017-8-2 17:07
标题: Java开发基础-web前端的应用开发
在进行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

---

作者: gmajihdx    时间: 2017-8-6 22:04
感谢分享

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2