调用百度地图API的简单应用

最新推荐文章于 2022-03-03 19:57:11 发布

MengUer

最新推荐文章于 2022-03-03 19:57:11 发布

阅读量579

点赞数 1

分类专栏： JavaScript 文章标签：百地图API JavaScript

本文链接：https://blog.csdn.net/MengUer/article/details/79962912

版权

JavaScript 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

周末想出去玩，只想去离家200公里以内的地方，因为这样坐动车只要一个小时。可是百度地图里又没有现成的画圆功能....那就自己写一个吧！

overlay.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>多边形区域判断</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--<link rel="stylesheet" type="text/css" href="styles.css">-->

<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,#allmap {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0;
	font-family: "微软雅黑";
}
</style>
<script src="http://api.map.baidu.com/api?v=2.0&ak=qAMEV7seCX64iXbdVIGKQqmej168FYpH"></script>
<script src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
<script src="<%=basePath %>jsp/overlay/overlay.js"></script>
</head>

<body>
	<div id="r-result">
		<input type="button" οnclick="add_polygon();" value="添加覆盖物" /> 
		<input type="button" οnclick="remove_overlay();" value="删除覆盖物" />
	</div>
	<div id="allmap"></div>
</body>
</html>

<script>
	/**
	 * 设置全局变量
	 */
	var map;//地图实例
	var point;//点实例
	var pointArray = new Array();//点的数组
	var marker;//标记实例
	var circle;//圆实例
	var polyline;//折线实例
	var polygon;//多边形实例

	//创建地图实例  
	map = new BMap.Map("allmap");
	//创建中心点
	point = new BMap.Point(114.38192, 30.591158);
	// 初始化地图，设置中心点坐标和地图级别
	map.centerAndZoom(point, 15);
	//开启控件和比例尺
	var top_left_control = new BMap.ScaleControl({
		anchor : BMAP_ANCHOR_TOP_LEFT
	});// 左上角，添加比例尺
	var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件
	
	/* var top_right_navigation = new BMap.NavigationControl({
		anchor : BMAP_ANCHOR_TOP_RIGHT,
		type : BMAP_NAVIGATION_CONTROL_SMALL
	}); */
	/*缩放控件type有四种类型:
	type为空
	BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；
	BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；
	BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*/
	//添加控件和比例尺
	map.addControl(top_left_control);
	map.addControl(top_left_navigation);
	//开启滚轮缩放
	map.enableScrollWheelZoom(true);
	//给地图添加监听器
	map.addEventListener("click", showInfo);

	
	add_circle();
	
</script>

overlay.js

//点击添加标记
var arrayIndex = 0;
function showInfo(en) {
	var longitude = en.point.lng;
	var latitude = en.point.lat;
	// alert(longitude + "-----" + latitude);
	// 把经纬度加到pointArray中
	createPointArray(longitude, latitude, arrayIndex);
	// alert(arrayIndex);
	add_polyline();
	arrayIndex++;
	// 在地图上添加标记
	// add_marker(longitude, latitude);
}
// 创建点的数组
function createPointArray(longitude, latitude, arrayIndex) {
	pointArray[arrayIndex] = createPoint(longitude, latitude);
}
// 将标记加入地图中
function add_marker(longitude, latitude) {
	marker = createMarker(longitude, latitude);
	add_overlay(marker);
}
// 根据点创建标记
function createMarker(longitude, latitude) {
	point = createPoint(longitude, latitude);
	marker = new BMap.Marker(point);
	return marker;
}
// 创建点
function createPoint(longitude, latitude) {
	point = new BMap.Point(longitude, latitude);
	return point;
}
// 根据点类型的数组创建多边形
function createPolygon(pointArray) {
	polygon = new BMap.Polygon(pointArray, {
		strokeColor : "blue",
		strokeWeight : 2,
		strokeOpacity : 0.5
	});
	return polygon;
}
// 将圆形加入地图中
function add_circle() {
	circle = new BMap.Circle(point, 100000, {
		fillColor : "blue",
		strokeWeight : 1,
		fillOpacity : 0.3,
		strokeOpacity : 0.3
	});
	add_overlay(circle);
	//搜索范围内的标志物
	var local = new BMap.LocalSearch(map, {
		renderOptions : {
			map : map,
			autoViewport : true
		}
	});
	local.searchNearby('火车站', point, 100000);
}
// 将折线加入地图中
function add_polyline() {
	if (pointArray.length < 2) {
		add_overlay(new BMap.Marker(pointArray[arrayIndex]));
	} else {
		// alert(arrayIndex);
		polyline = new BMap.Polyline([ pointArray[arrayIndex - 1],
				pointArray[arrayIndex] ], {
			strokeColor : "blue",
			strokeWeight : 2,
			strokeOpacity : 0.5
		});
		add_overlay(polyline);
	}
}
// 将多边形加入地图中
function add_polygon() {
	if (pointArray.length < 3) {
		alert("你这不是图形啊！兄弟");
	} else if (pointArray.length > 2 && pointArray.length < 100) {
		var polygon = createPolygon(pointArray);
		map.addOverlay(polygon);
		arrayIndex = 0;
		pointArray = new Array();
	} else {
		alert("点的好玩么？？");
	}
}
// 在地图中加入覆盖物
function add_overlay(overlay) {
	map.addOverlay(overlay);
}
// 删除覆盖物
function remove_overlay() {
	map.clearOverlays();
}

new BMap.Circle()方法中的100000代表半径100公里。