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

原创 2018年04月16日 16:52:12

周末想出去玩,只想去离家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" onclick="add_polygon();" value="添加覆盖物" /> 
		<input type="button" onclick="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公里。
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/MengUer/article/details/79962912

Android开发高级组件与框架——百度地图

-
  • 1970年01月01日 08:00

使用百度地图API在页面添加百度地图应用

目录: 页面预览 准备工作 代码实现 相关链接 本文我们使用百度提供的地图API,通过8行代码就可在自己的网页引入百度地图的应用。操作十分便捷,功能又十分强大。1、页面预览很多时候我们希望在自己的页面...
  • a153375250
  • a153375250
  • 2016-05-20 09:46:31
  • 8661

百度地图API实例开发 分享

第一章. API函数说明 1.1 百度地图API介绍  1.百度地图API是百度提供的给开发人员使用的开放性API,它分为三大类:网页地图应用、手机地图应用、服务器端地图应用;它们分别的意思是:[...
  • shiyong7682719
  • shiyong7682719
  • 2014-10-31 17:11:10
  • 1997

如何使用Android调用百度地图API——实时定位

在Android开发中有一个非常重要的应用就是实时定位,通过手机在手机地图上进行实时定位,定位当前手机的位置,这个功能我们一般都可以用百度地图或者谷歌地图的api来实现,这些api代码要在百度或者谷歌...
  • lc41214
  • lc41214
  • 2016-06-12 16:40:25
  • 666

iOS百度地图API的使用

(一)、开发前准备工作:
  • xj_love
  • xj_love
  • 2016-02-23 21:26:04
  • 1719

百度地图api调用

百度地图api调用 在html5网站中很多企业需要用到的企业地址位置。大多调用第三方的地图api来进行制作。 目前比较主流的第三方地图插件有百度、高德、腾讯、搜狗、谷歌(国内暂不支持)等,他们的引...
  • qq_35515563
  • qq_35515563
  • 2017-03-01 15:33:25
  • 1319

C#调用百度地图API

1.首先需要自己创建应用获得ak 链接:http://lbsyun.baidu.com/index.php?title=jspopular 应用名称可以自己填,“IP白菜单”处建议大家填0.0.0...
  • Gary_888
  • Gary_888
  • 2016-06-06 14:16:13
  • 2103

java 调用 百度api 调用百度地图api

  • 2013年06月20日 16:43
  • 2KB
  • 下载

百度地图API开发应用

百度地图API开发应用房地产销售分析管理系统   上海为卓信息科技有限公司——专业gis地图开发项目服务      系统概述     俗话说,安居才能乐业。随着社会的发展,人们生活质量水平的普遍提高...
  • qq_18538269
  • qq_18538269
  • 2016-04-26 16:17:58
  • 4539

js调用百度地图API

javacript 百度地图API
  • whsw423
  • whsw423
  • 2016-03-16 20:43:25
  • 4202
收藏助手
不良信息举报
您举报文章:调用百度地图API的简单应用
举报原因:
原因补充:

(最多只允许输入30个字)