百度地图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 本类方法功能大多使用 ...
随机推荐
- IDEA小技巧：Debug拖动跳转任意行
昨天分享了一个在IDEA中为Debug断点添加条件的小技巧.今天继续分享一个Debug过程中非常实用的小插件. 插件名字叫Jump To Line: 安装完成之后,你在Debug过程中,会在断点的左边 ...
- jsp中c:forEach使用
首先需要在jsp中引入<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> ...
- 《手把手教你》系列基础篇（八十五）-java+ selenium自动化测试-框架设计基础-TestNG自定义日志-下篇（详解教程）
1.简介 TestNG为日志记录和报告提供的不同选项.现在,宏哥讲解分享如何开始使用它们.首先,我们将编写一个示例程序,在该程序中我们将使用 ITestListener方法进行日志记录. 2.Test ...
- VScode链接服务器并配置公钥-SSH Keys
VScode链接服务器并配置公钥-SSH Keys 一直在用Xshell做SSH连接服务器与虚拟机,但是中文乱码的问题一直找不到解决方案,干脆使用编辑器自带的插件,集成之后用起来也方便 1.概述 做法 ...
- 使用Lua 脚本实现redis 分布式锁，报错：ERR Error running script (call to f_8ea1e266485534d17ddba5af05c1b61273c30467): @user_script:10: @user_script: 10: Lua redis() command arguments must be strings or integers .
在使用SpringBoot开发时,使用RedisTemplate执行 redisTemplate.execute(lockScript, redisList); 发现报错: ERR Error run ...
- 2021.08.05 P5357 康托展开模板（康托展开）
2021.08.05 P5357 康托展开模板(康托展开) P5367 [模板]康托展开 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 重点: 1.康托展开 算法学习笔记(56): ...
- SQL Server 2019安装 Developer 版
1.打开微软官方下载网站https://www.microsoft.com/zh-CN/sql-server/sql-server-downloads 2.双击打开下载的文件,等待下载完成 3. 选择 ...
- PTA刷题笔记
PTA刷题记录 仓库地址: https://github.com/Haorical/Code/tree/master/PTA/GPLT 两周之内刷完GPLT L2和L3的题,持续更新,包括AK代码,坑 ...
- XCTF练习题---MISC---stage1
XCTF练习题---MISC---stage1 flag:AlphaLab 解题步骤: 1.观察题目,下载附件 2.打开附件后发现是一张图片,初步判断是图片隐写,上Stegsolve进行转换,得到一张 ...
- Django学习——静态文件配置、request对象方法、pycharm如何链接数据库、Django如何指定数据库、Django orm操作
静态文件配置 # 1.静态文件 网站所使用的已经提前写好的文件 css文件 js文件 img文件 第三方文件 我们在存储静态文件资源的时候一般默认都是放在static文件夹下 # 2.Django静态 ...