Javaweb项目中使用百度地图小例子

最新推荐文章于 2024-07-01 12:07:02 发布

hhyx2018

最新推荐文章于 2024-07-01 12:07:02 发布

阅读量2.2k

点赞数

分类专栏：记录文章标签： Javaweb项目调用百度地图

本文链接：https://blog.csdn.net/hhyx2018/article/details/84857860

版权

记录专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近领导让在系统中添加题图功能，整理的小例子，密钥申请是在百度地图开放平台：http://lbsyun.baidu.com/

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<style type="text/css">
		body,html {width: 100%;height: 100%;margin: 0;font-family: "微软雅黑";}
		
		#allmap {height: 500px;width: 100%;}
		
		#r-result {width: 100%;font-size: 14px;}
		</style>
		<script type="text/javascript"
			src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
		<title>城市地图</title>
	</head>
<body>
	<div id="allmap"></div>
	<div id="r-result">
		经度: <input id="longitude" type="text"
			style="width: 100px; margin-right: 10px;" /> 纬度: <input
			id="latitude" type="text" style="width: 100px; margin-right: 10px;" />
		<input type="button" value="查询" onclick="theLocation()" />
	</div>
</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");
	var point = new BMap.Point(113.658069, 34.747239);//创建点坐标
	map.centerAndZoom(point, 16);//初始化地图，设置中心点坐标和地图级别
	map.enableScrollWheelZoom(true);
	map.addControl(new BMap.NavigationControl()); 
	map.addControl(new BMap.MapTypeControl()); 
	map.addControl(new BMap.ScaleControl()); 
	map.addControl(new BMap.OverviewMapControl()); 

	// 用经纬度设置地图中心点
	function theLocation() {
		if (document.getElementById("longitude").value != ""
				&& document.getElementById("latitude").value != "") {
			map.clearOverlays();
			var new_point = new BMap.Point(
					document.getElementById("longitude").value, document
							.getElementById("latitude").value);
			var marker = new BMap.Marker(new_point); // 创建标注
			map.addOverlay(marker); 
			map.panTo(new_point);

		}

	}
	//解析地址
	var geoc = new BMap.Geocoder(); //创建一个地址解析器的实例

	map.addEventListener("click", function(e) { 
		var pt = e.point;
		geoc.getLocation(pt, function(rs) {
			var addComp = rs.addressComponents;//结构化的地址描述
			alert(addComp.province + ", " + addComp.city + ", "
					+ addComp.district + ", " + addComp.street + ", "
					+ addComp.streetNumber);
		});
	});

	//右键功能，放大缩小
	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);
</script>

hhyx2018

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Javaweb项目中使用百度地图小例子

最近领导让在系统中添加题图功能，就在百度地图开放平台查找资料，地址：http://lbsyun.baidu.com/&amp;lt;%@ page language=&quot;java&quot; contentType=&quot;text/html; charset=utf-8&quot; pageEncoding=&quot;utf-8&quot;%&amp;gt;&amp;lt;!DOCTYPE html PUBL
复制链接

扫一扫