高德地图 JS API (jsp + miniui(子页面数据返回父页面并设值) + 单个点标记 + 点标记经纬度 + 回显 + 限制地图显示范围+搜索)
-*- 父页面js
function mapFocus(){
//console.log("-*-");
var longitude = mini.get("jd").getValue(); // 经度
var latitude = mini.get("wd").getValue(); // 纬度
var url = "<%=basePath %>project/construction/Map.jsp";
//console.log(latitude);
//console.log(longitude);
if(longitude!="" && latitude!="" ){
//console.log("不为空");
url = "<%=basePath %>project/construction/Map.jsp?longitude="+longitude+"&latitude="+latitude;
}
mini.open({
url: url,
title: '',
width: 800,
height: 600,
ondestroy: function (action) {
// grid.reload();
}, ondestroy: function (action) { //弹出页面关闭前
if (action == "ok") { //如果点击“确定”
var iframe = this.getIFrameEl(); //获取选中、编辑的结果
var data = iframe.contentWindow.GetData(); // 调用子页面方法，此方法返回子页面数据，
data = mini.clone(data); //必须。克隆数据。
//console.log(data[0]);
//console.log(data[1]);
mini.get("jd").setValue(data[0]);
mini.get("wd").setValue(data[1]);
//$("#jd").val(data[0]);
//$("#wd").val(data[1]);
/*grid.load({
"goodsId":data.goodsId,
"demandId":data.demandId
});*/
}
}
});
}
-*- 子页面
<%@ 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">
-->
<%-- --%>
<script src="<%=basePath %>common/boot.web.miniui.js" type="text/javascript"></script>
<script src="<%=basePath %>common/js/jquery-1.11.3.min.js" type="text/javascript"></script>
<%-- --%>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>
</head>
<body> <div id="container"></div>
<div class="input-card" style="width: 120px">
<button class="btn" onclick="onOk()" style="margin-bottom: 5px">确定</button>
</div>
<div class="info">
<div class="input-item">
<div class="input-item-prepend">
<span class="input-item-text" style="width:10rem;">请输入关键字</span>
</div>
<input id='input_place' type="text" >
</div>
<p id="input-info"></p>
</div>
<!-- 加载地图JSAPI脚本 -->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=你的key值"></script>
<!-- <script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/jquery-1.11.1.min.js" ></script> -->
<script type="text/javascript" src="<%=basePath %>common/js/underscore-min.js" ></script>
<script type="text/javascript" src="<%=basePath %>common/js/backbone.js" ></script>
<script type="text/javascript" src='<%=basePath %>common/js/prety-json.js'></script>
<script> mini.parse(); var lng = "<%=longitude%>"; // 经度
var lat = "<%=latitude%>"; // 纬度
$(function(){ // jQuery
//lockMapBounds();
if(lng!="" && lat!="" ){
console.log("不为空-*-");
addMarker(Number(lng),Number(lat)); // 转成 int
focus(Number(lng),Number(lat));
// setPosition(lnglat:LngLat) 设置点标记位置
//var overlays = map.getAllOverlays("marker"); // 获得 marker 类型的数据
//var position = overlays.setPosition(lng:lat); // 设置点标记位置
}
}); //限制地图显示范围
function lockMapBounds() { // 问题：例：搜索某地点时点标记在 某地点，但中心不在某地点上
var bounds = map.getBounds(); // 获取当前地图视图范围，获取当前可视区域。
map.setLimitBounds(bounds); //设置Map的限制区域，设定区域限制后，传入参数为限制的Bounds。地图仅在区域内可拖拽
} var map = new AMap.Map('container', {
resizeEnable: true, //是否监控地图容器尺寸变化
zoom:11, //初始化地图层级
center: [121.474468,31.232408] //初始化地图中心点
});
var clickEventListener = map.on('click', function(e) { // 绑定点击事件
var lng = e.lnglat.getLng();
var lat = e.lnglat.getLat();
//console.log("经度："+lng+" / 纬度"+lat);
addMarker(lng,lat);
}); // 实例化点标记
function addMarker(lng,lat) {
clearMarker() // 清除之前点击的点标记
marker = new AMap.Marker({
icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
position: [lng,lat], // 经度和纬度
offset: new AMap.Pixel(-20, -62) //点标记显示位置偏移量
});
marker.setMap(map);
}
// 清除 marker
function clearMarker() {
// 清除地图上所有添加的覆盖物
map.clearMap();
/*if (marker) {
marker.setMap(null);
marker = null;
}*/
} //////////////////////////////////////////////////////////////////
AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],function(){
//输入提示
var auto = new AMap.Autocomplete({
city : "上海市",
input: "input_place",
citylimit : true
});
//构造地点查询类
var placeSearch = new AMap.PlaceSearch({
city : "上海市",
citylimit : true
//map: map
});
//注册监听，当选中某条记录时会触
AMap.event.addListener(auto, "select",function select(e) {
placeSearch.setCity(e.poi.adcode);
placeSearch.search(e.poi.name); //关键字查询查询 dwLng = e.poi.location.lng;
dwLat = e.poi.location.lat; addMarker(dwLng,dwLat);
focus(dwLng,dwLat);
});
});
function focus(dwLng,dwLat){
//console.log(dwLng);
//console.log(dwLat);
var zoom=16;
map.setZoomAndCenter(zoom,[dwLng,dwLat]);
} function onOk(){
// getPosition( ) LngLat 获取点标记的位置
//console.log(markers);
console.log("获得数据，返回父页面"); mini.confirm("确认", "提示",
function (action) {
if (action == "ok") {
CloseWindow("ok");
}
}
);
} function onCancel(e) {
CloseWindow("cancel");
}
function CloseWindow(action) {
if (window.CloseOwnerWindow) return window.CloseOwnerWindow(action);
else window.close();
} function GetData(){ // 获得点标记
var overlays = map.getAllOverlays("marker"); // 获得 marker 类型的数据
// console.log(overlays)
var position = overlays[0].getPosition();
// console.log(position.lng);
var ids = [position.lng, position.lat];
var id = ids.join(',');
return ids;
}
</script>
</body>
</html>
高德地图 JS API (jsp + miniui(子页面数据返回父页面并设值) + 单个点标记 + 点标记经纬度 + 回显 + 限制地图显示范围+搜索)的更多相关文章
- 高德地图 js api 使用
使用高德地图js api 制作网页上的地图应用. 1.先申请一个 开发者用的 key . 2. 在页面中引入高德提供的地图js <script src="http://webapi. ...
- 高德地图 JS API - 根据地名实现标记定位
德地图 JS API 使用前的准备工作请参考官方网站说明: https://lbs.amap.com/api/javascript-api/guide/abc/prepare 根据地名实现地图标记定位 ...
- 腾讯地图JS API实现带方向箭头的线路Polyline
最近产品提出一个需求,在我们使用的腾讯地图上为线路polyline添加线路方向.例如下图所示: 查找腾讯地图JS API提供的API,没有找到对应的支持,询问负责腾讯地图的人也得到了同样的答案,即地图 ...
- JS实现关闭当前子窗口，刷新父窗口及调用父窗口的方法
一.js实现关闭当前子窗口,刷新父窗口 JS代码如下: <script> function refreshParent() { window.opener.location.href = ...
- JS实现关闭当前子窗口，刷新父窗口
一.JS实现关闭当前子窗口,刷新父窗口 JS代码如下: <script> function refreshParent() { window.opener.location.href = ...
- 关闭open页面时刷新父页面列表
var winObjEI = window.open("/Invoice/InvoiceViewEI?invoiceid=" + data.InvoiceId); ; //关闭op ...
- Spring MVC中Controller如何将数据返回给页面
要实现Controller返回数据给页面,Spring MVC 提供了以下几种途径: ModelAndView:将视图和数据封装成ModelAndView对象,作为方法的返回值,数据最终会存到Http ...
- 子组件props接受父组件传递的值 能修改吗？
vue2.0 子组件props接受父组件传递的值,能不能修改的问题整理 父组件代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...
- jQuery如何去判断页面是否有父页面？
jQuery如何去判断页面是否有父页面? 是要判断当前页面是否被嵌入在frame里吗? 1 2 3 if (top != self) { alert('我在框架里'); }
随机推荐
- java 从零开始手写 RPC (04) -序列化
序列化 java 从零开始手写 RPC (01) 基于 socket 实现 java 从零开始手写 RPC (02)-netty4 实现客户端和服务端 java 从零开始手写 RPC (03) 如何实 ...
- cadvisor+prometheus+alertmanager+grafana完成容器化监控告警（一）
一.概况 1.拓扑图 2.名词解释 Grafana 可视化监控容器运行情况 Prometheus: 开源系统监视和警报工具包 Alertmanager 一个独立的组件,负责接收并处理来自Prometh ...
- 从零入门 Serverless | Serverless 应用如何管理日志 & 持久化数据
作者 | 竞霄 阿里巴巴开发工程师 本文整理自<Serverless 技术公开课>,关注"Serverless"公众号,回复"入门",即可获取 Se ...
- 鲲鹏展翅｜SphereEx 获华为鲲鹏技术认证
SphereEx Data Middleware 通过了华为鲲鹏技术认证并加入鲲鹏展翅伙伴计划,未来 SphereEx Data Middleware 产品将继续以分布式能力为基础,以数据安全.分布式 ...
- VMware中Linux虚拟机与Windows主机共享文件夹
VMware下Linux虚拟机与Windows主机共享文件夹 1. 安装vm-tool 2. 开启共享文件夹 虚拟机->设置->选项->共享文件夹"右边选择"总是 ...
- FastAPI 学习之路（十九）处理错误
系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...
- Less-(5~7) error based
Less-5: 核心语句: 我们注意到,当输入正确时,并不能获得有价值的回显.好在出现错误时,会爆出错误内容: 于是,使用报错注入: 1' and updatexml(1,concat(0x7e,( ...
- BUAA_2020_软件工程_热身作业
项目 内容 这个作业属于哪个课程 2020春季计算机学院软件工程(罗杰 任建) 这个作业的要求在哪里 热身作业要求 我在这个课程的目标 了解软件工程的技术,掌握工程化开发的能力 这个作业在哪个具体方面 ...
- 洛谷 P3209 [HNOI2010] 平面图判定
链接: P3209 题意: 给出 \(T\) 张无向图 \((T\leq100)\),并给出它对应的哈密顿回路,判断每张图是否是平面图. 分析: 平面图判定问题貌似是有线性做法的,这里给出链接,不是本 ...
- TT模板的作用及使用
一.假如你在ef中添加一个实体,没有模板,你需要在DAL层中新建一个"莫某Dal"和"I某某Dal"以及在公共的DbSession中加你的这个dal,然后需要在 ...