百度地图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 本类方法功能大多使用 ...
随机推荐
- 关于iOS 二维数组，对象映射的问题
数据格式如下: 遇到的问题是二维数组的 对象无法 通过 yymodel 直接实力话 ~~~ -"scoring_probability_distribution": [ -[ -{ ...
- Java学习——数组的基础知识
数组的特点.分类:一维.二维数组的使用:数组的声明和初始化.调用数组的指定位置的元素.获取数组的长度.遍历数组.数组元素的默认初始化值
- git的.gitignore文件内容
**/pom.xml.versionsBackup **/target/ **/out/ *.class # Mobile Tools for Java (J2ME) .mtj.tmp/ .idea/ ...
- Java语言学习day33--8月8日
今日内容介绍1.基本类型包装类2.System类3.Math类4.Arrays类5.大数据运算 ###01基本数据类型对象包装类概述 *A:基本数据类型对象包装类概述 *a.基本类型包装类的产生 在实 ...
- XCTF练习题---CRYPTO---safer-than-rot13
XCTF练习题---CRYPTO---safer-than-rot13 flag:no_this_is_not_crypto_my_dear 解题步骤: 1.观察题目,下载附件 2.打开后发现是个文件 ...
- 1.6 为什么要学Linux，它比Windows好在哪里？
早在 20 世纪 70 年代,UNIX 系统是开源而且免费的,但是在 1979 年时,AT&T 公司宣布了对 UNIX 系统的商业化计划,随之开源软件业转变成了版权式软件产业,源代码被当作商业 ...
- WPF 制作雷达扫描图
实现一个雷达扫描图. 源代码在TK_King/雷达 (gitee.com),自行下载就好了 制作思路 绘制圆形(或者称之轮) 绘制分割线 绘制扫描范围 添加扫描点 具体实现 首先我们使用自定义的控件. ...
- Sentinel Dashboard 规则 持久化到Nacos
本篇文章基于sentinel1.8.4版本进行改造的.本篇主要记录改造步骤 1.下载源码 https://github.com/alibaba/Sentinel 2.打开下载的sentinel,到se ...
- 使用 VS Code + Markdown 编写 PDF 文档
背景介绍 作为一个技术人员,基本都需要编写技术相关文档,而且大部分技术人员都应该掌握 markdown 这个技能,使用 markdown 来编写并生成 PDF 文档将会是一个不错的体验,以下就介绍下如 ...
- CentOS7防火墙firewalld的配置
开机启动的开启与禁止 # 开机启动 systemctl enable firewalld # 禁止开机启动 systemctl disable firewalld 基本操作 # 查看状态 system ...