百度地图API 地图圈区域并计算坐标点是否在区域内
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/admin/layer/layer.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=LiFSZdkfPQkmwmWGb2gSyzA4b6BESUaP"></script>
<!--加载鼠标绘制工具-->
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css">
<!--加载计算工具-->
<script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
<!--加载检索信息窗口-->
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css">
</head>
<body>
<div style="margin-left: 50px;">
<lable><input type="text" id="suggestId" placeholder="请输入关键字"></lable>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
</div>
<div id="map" style="width:1200px; height: 600px; margin-left: 50px;"></div>
<ul>
<table>
<tr>
<td>序号</td>
<td>区域名称</td>
<td>颜色</td>
<td>操作</td>
</tr>
<foreach name="positionList" item="v" key="k">
<tr>
<td><{$k}></td>
<td><{$v['name']}></td>
<!--动态设置选定区域的颜色-->
<td><input type="text" value="<{$v['color']}>" onblur="upColor(<{$v['id']}>,$(this))"><span style="display: inline-block;width: 20px;height:20px;background-color:<{$v['color']}>"></span></td>
<td>
<!--删除数据中中的指定区域-->
<a src="">删除</a> </td>
</tr>
</foreach>
</table>
</ul>
</body>
<script>
//更新数据库中的颜色
function upColor(id,event){
var color = event.val();
var id = id;
$.ajax({
url:'<{:U("map/upColor")}>',
type:'post',
dataType:'json',
data:{
color:color,
id:id
},
success:function(res){
if(res.status){
window.location.reload();
} }
});
}
$(function(){
//实例化百度地图
var map = new BMap.Map("map");
map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
map.centerAndZoom("包头",15); //设置地图中心和地图显示等级
//页面加载先后端请求区域坐标点 并且循环在地图画出已选定区域
$.ajax({
url:'<{:U("map/poList")}>',
type:'post',
dataType:'json',
success:function(res){
if(res){
console.log(res);
var polygon = [];
for(var i=0;i<res.length;i++){
var arr = [];
for(var x=0; x<res[i]['position'].length;x++){
let poi = new BMap.Point(parseFloat(res[i]['position'][x].lng),parseFloat(res[i]['position'][x].lat));
arr.push(poi);
}
polygon[i] = new BMap.Polygon(arr,
//设置区域样式
{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5,fillColor:res[i]['color'],fillOpacity:0.3}
);
map.addOverlay(polygon[i]);
}
} }
}); function G(id) {
return document.getElementById(id);
}
//建立一个自动完成的对象
var ac = new BMap.Autocomplete({
"input" : "suggestId",
"location" : map
});
ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
var str = "";
var _value = e.fromitem.value;
var value = "";
if (e.fromitem.index > -1) {
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value; value = "";
if (e.toitem.index > -1) {
_value = e.toitem.value;
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
G("searchResultPanel").innerHTML = str;
}); var myValue;
ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
var _value = e.item.value;
myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue; setPlace();
}); function setPlace(){
map.clearOverlays(); //清除地图上所有覆盖物
function myFun(){
var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
map.centerAndZoom(pp, 16);
map.addOverlay(new BMap.Marker(pp)); //添加标注
}
var local = new BMap.LocalSearch(map, { //智能搜索
onSearchComplete: myFun
});
local.search(myValue);
} //右键菜单
var menu = new BMap.ContextMenu();
var item1=new BMap.MenuItem("撤销" ,function(location){ map.removeOverlay(overlays[overlays.length-1]);overlays.splice(overlays.length-1,1) });
menu.addItem(item1);
map.addContextMenu(menu);
var overlays = [];
var overlaycomplete = function(e){
var position = [];
overlays.push(e.overlay);
//获取多边形端点坐标
// if (e.drawingMode == BMAP_DRAWING_RECTANGLE ) {
//alert(' 所画的点个数：' + e.overlay.getPath().length);
for(var i=0;i<e.overlay.getPath().length;i++){
let coordinate = new Object();
coordinate.lng = e.overlay.getPath()[i].lng;
coordinate.lat = e.overlay.getPath()[i].lat;
position.push(coordinate);
// alert(" 点"+(i+1)+":经度"+e.overlay.getPath()[i].lng+" 纬度："+e.overlay.getPath()[i].lat);
}
//prompt层 // alert("面积："+BMapLib.GeoUtils.getPolygonArea(e.overlay));
// }
//关闭绘制模式
drawingManager.close();
layer.prompt(
{title: '添加区域名称'},
function(val, index){
if(val!==''){
$.ajax({
url:'<{:U("map/pushPosition")}>',
type:'post',
dataType:'json',
data:{
position:JSON.stringify(position),
name:val
},
success:function(res){
if(res.status){
layer.close(index);
window.location.reload();
} }
});
}else{
layer.close(index);
}
}
); };
//绘制样式
var styleOptions = {
strokeColor:"red", //边线颜色。
fillColor:"red", //填充颜色。当参数为空时，圆形将没有填充效果。
strokeWeight: 3, //边线的宽度，以像素为单位。
strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
strokeStyle: 'solid' //边线的样式，solid或dashed。
};
//实例化鼠标绘制工具
var drawingManager = new BMapLib.DrawingManager(map, {
isOpen: false, //是否开启绘制模式
enableDrawingTool: true, //是否显示工具栏
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
offset: new BMap.Size(5, 5), //偏离值
drawingModes: [//画覆盖物工具栏上显示的可选项
BMAP_DRAWING_MARKER,
BMAP_DRAWING_CIRCLE,
BMAP_DRAWING_POLYLINE,
BMAP_DRAWING_POLYGON,
BMAP_DRAWING_RECTANGLE
]
},
circleOptions: styleOptions, //圆的样式
polylineOptions: styleOptions, //线的样式
polygonOptions: styleOptions, //多边形的样式
rectangleOptions: styleOptions //矩形的样式
});
//添加鼠标绘制工具监听事件，用于获取绘制结果
drawingManager.addEventListener('overlaycomplete', overlaycomplete);
function clearAll() {
for(var i = 0; i < overlays.length; i++){
map.removeOverlay(overlays[i]);
}
overlays.length = 0
}
//坐标点
var lng,lat;
point = [
new BMap.Point(lng,lat),
];
//计算坐标point 是否在polygon区域中 接口使用请查看百度地图api
BMapLib.GeoUtils.isPointInPolygon(point[0],polygon[i]);
}) </script> </html>
百度地图API 地图圈区域并计算坐标点是否在区域内的更多相关文章
- 【百度地图API】如何根据摩卡托坐标进行POI查询，和计算两点距离
原文:[百度地图API]如何根据摩卡托坐标进行POI查询,和计算两点距离 摘要: 百度地图API有两种坐标系,一种是百度经纬度,一种是摩卡托坐标系.在本章你将学会: 1.如何相互转换这两种坐标: 2. ...
- 百度地图API二：根据标注点坐标范围计算显示缩放级别zoom自适应显示地图
原文:百度地图API二:根据标注点坐标范围计算显示缩放级别zoom自适应显示地图 版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/liusaint1992/ ...
- 百度地图api 实例 自动提示 并计算两地的行驶距离
百度地图api 实例 自动提示 并计算两地的行驶距离 <!DOCTYPE html> <html> <head> <meta http-equiv=" ...
- 【百度地图API】如何用圆形搜索获取中心点周围100米内全部关键点？如天安门附近所有的餐厅、加油站、宾馆、大厦等
原文:[百度地图API]如何用圆形搜索获取中心点周围100米内全部关键点?如天安门附近所有的餐厅.加油站.宾馆.大厦等 摘要: 在LBS上有这样一个常用的功能,查找附近所有的关键点(POI点,比如标志 ...
- android 3.0+百度地图api地图如何移动到指定的经纬度处
由于百度地图api,2.0+和3.0+的改动比较大,api基本上被全换过了,有些同学可能2.0+的api使用的非常熟悉,但是更新到3.0+时,却会遇到一些小麻烦(由于api变了,你就需要重新学习它的a ...
- 【高德地图API】如何解决坐标转换，坐标偏移？
http://bbs.amap.com/thread-18617-1-1.html#rd?sukey=cbbc36a2500a2e6c2b0b19115118ace519002ff3a52731f13 ...
- 百度地图API和高德地图API资料集锦
[高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行 [高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自 ...
- 吐槽贴：百度地图 api 封装 的实用功能 [源码下载]
ZMap 类 功能介绍 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐 ...
- 百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 [源码下载]
相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修正版[ZMap.js] 实例源码! ZMap.js 本类方法功能大多使用 ...
随机推荐
- windows+ubuntu双系统时间同步问题
windows+ubuntu双系统时间同步问题 给Ubuntu更新时间,在终端输入: sudo apt-get install ntpdate sudo ntpdate time.windows.co ...
- Mysql各版本号的含义
1)MySQL Community Server 社区版本,开源免费,但不提供官方技术支持2)MySQL Enterprise Edition企业版本,需付费,可以试用30天3)MySQL Clust ...
- PostgreSQL安装 报there has been an error.Error running
直接用postgresql-11.2-1:https://get.enterprisedb.com/postgresql/postgresql-11.2-1-windows-x64.exe这个版本的安 ...
- “九韶杯”河科院程序设计协会第一届程序设计竞赛 D数列重组 next_permutation
"九韶杯"河科院程序设计协会第一届程序设计竞赛 D数列重组 next_permutation 题目 原题链接: https://ac.nowcoder.com/acm/conte ...
- javaWeb代码整理02-jdbcTemplete数据库连接工具
jar包: maven坐标: /**属于spring框架的包*/<dependency> <groupId>org.springframework</groupId> ...
- Java语言学习day11--7月10日
今日内容介绍1.自定义类型的定义及使用2.自定义类的内存图3.ArrayList集合的基本功能4.随机点名器案例及库存案例代码优化 ###01引用数据类型_类 * A: 数据类型 * a: java中 ...
- 20202127 实验二《Python程序设计》实验报告
20202127 2021-2022-2 <Python程序设计>实验二报告 课程:<Python程序设计>班级: 2021姓名: 马艺洲学号:20202127实验教师:王志强 ...
- Apache Hudi 如何加速传统的批处理模式？
1. 现状说明 1.1 数据湖摄取和计算过程 - 处理更新 在我们的用例中1-10% 是对历史记录的更新.当记录更新时,我们需要从之前的 updated_date 分区中删除之前的条目,并将条目添加到 ...
- XCTF练习题---MISC---easycap
XCTF练习题---MISC---easycap flag:FLAG:385b87afc8671dee07550290d16a8071 解题步骤: 1.观察题目,下载附件 2.拿到手以后发现是一个流量 ...
- Mybatis Plus之内置Mapper实践
MyBatis Plus,作为对MyBatis的进一步增强,大大简化了我们的开发流程,提高了开发速度 配置 由于Mybatis Plus是建立在Mybatis之上的,所以其已经依赖了Mybatis,故 ...