百度地图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 本类方法功能大多使用 ...
随机推荐
- 【转载】Java密钥库及keytool使用详解
---------------- 版权声明:本文为CSDN博主「adrninistrat0r」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明. 原文链接:https: ...
- python常见内置函数
一. map( ) 映射 l = [1,2,3,4] print(list(map(lambda x:x+1,l))) # 获取列表中每个元素并传递给匿名函数运算保存返回值 二. zip( ) 拉链 ...
- 在UnityUI中绘制线状统计图
##先来个效果图 觉得不好看可以自己调整 ##1.绘制数据点 线状图一般由数据点和连线组成 在绘制连线之前,我们先标出数据点 这里我选择用Image图片来绘制数据点 新建Canvas,添加空物体Gra ...
- 从实例学习 Go 语言、"基础与进阶" 学习笔记及心得体会、Go指南
第一轮学习 golang "基础与进阶"学习笔记,Go指南练习题目解析.使用学习资料 <Go-zh/tour tour>.记录我认为会比较容易忘记的知识点,进行补充,整 ...
- Hyperledger Fabric无系统通道启动及通道的创建和删除
前言 在Hyperledger Fabric组织的动态添加和删除中,我们已经完成了在运行着的网络中动态添加和删除组织,但目前为止,我们启动 orderer 节点的方式都是通过系统通道的方式,这样自带系 ...
- 学习打卡——Linux下安装Redis
http://download.redis.io/releases/,这是查看当前Redis可供下载的Linux系统版本 第一步:启动系统 启动Linux,我这里是CentOS 7 第二步:下载 打开 ...
- JavaScript学习总结8-DOM
今天学习了DOM的增删改查 innerText可以用来修改文本的内容,但是无法识别标签,要修改标签样式使用innerHTML 删除节点的步骤:先获取父节点,在通过父节点删除子节点 注意:删除节点是一个 ...
- vue 项目build后部署上去页面空白
默认情况下vue-cli 会认为项目是部署在域名的根路径上. 但是当项目被部署到了一个子路径上,就要自己选定子路径. 比如项目被部署在了 https://www.ujapp.com/my-app, 则 ...
- Java语言学习day04--7月1日
###09数据类型转换_自动转换 * A: 自动类型转换 * a:表示范围小的数据类型转换成范围大的数据类型,这种方式称为自动类型转换 自动类型转 ...
- 今天遇到 Could not determine type for: java.util.List
今天遇到 Could not determine type for: java.util.List 用hibernate 映射好好的竟然出现这个问题 以前也遇到过,但不知道怎么给解决了,今天又遇到了, ...