您的位置：首页 > 编程语言 > Java开发

javaweb项目中使用百度地图进行项目开发

2016-12-23 23:24 926 查看

在web项目开发过程中，可能会需要地图的支持，实现定位、导航等功能，在这里以百度地图为例，做一个简单的地图显示。

下面代码使用JSP完成的，要想使用HTML版本，只需要把

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>

这句话删掉，然后把文件的后缀名改成.HTML格式的即可。（精彩内容在文章最后）

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<!-- 引入百度地图的API -->
<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
<title>百度地图</title>
<!-- 地图显示的样式 -->
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<!-- 地图显示的初始化 -->
<script type="text/javascript">

var map = new BMap.Map("container");        //在container容器中创建一个地图,参数container为div的id属性;
var point = new BMap.Point(120.2,30.25);    //创建点坐标
map.centerAndZoom(point, 14);                //初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom();                //激活滚轮调整大小功能
map.addControl(new BMap.NavigationControl());    //添加控件：缩放地图的控件，默认在左上角；
map.addControl(new BMap.MapTypeControl());        //添加控件：地图类型控件，默认在右上方；
map.addControl(new BMap.ScaleControl());        //添加控件：地图显示比例的控件，默认在左下方；
map.addControl(new BMap.OverviewMapControl());  //添加控件：地图的缩略图的控件，默认在右下方； TrafficControl
var search = new BMap.LocalSearch("中国", {
onSearchComplete: function(result){
if (search.getStatus() == BMAP_STATUS_SUCCESS){
var res = result.getPoi(0);
var point = res.point;
map.centerAndZoom(point, 11);
}

},renderOptions: {  //结果呈现设置，
map: map,
autoViewport: true,
selectFirstResult: true
} ,onInfoHtmlSet:function(poi,html){
// alert(html.innerHTML)
}

});

//设置城市的函数
function setCity(){
search.search(document.getElementById("cityName").value);
}
//初始化显示的城市
search.search(document.getElementById("cityName").value);
</script>
</head>

<body>

<input type="text" id="cityName" value="枣庄"/>
<input type="button" onclick="setCity()" value="查找" />
<div id="container" style="width:1024px;height:600px;"></div>

</body>

</html>

这个网址是百度地图免费开放的一些案例，内容非常丰富，但是有些使用是收费的，大家可以根据自己需要进行学习。

http://developer.baidu.com/map/jsdemo.htm#d0_4

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航