高德地图 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('我在框架里'); }
随机推荐
- The art of multipropcessor programming 读书笔记-硬件基础1
本系列是 The art of multipropcessor programming 的读书笔记,在原版图书的基础上,结合 OpenJDK 11 以上的版本的代码进行理解和实现.并根据个人的查资料以 ...
- equals之List
School类 package com.collection.equals; /* * 定义一个学校类 相当于一个学校模板 * 状态: 1.学校id 2.学校名称 * */ public class ...
- Python3 网络通信 网络聊天室 文件传输
Python3 网络通信 网络聊天室 文件传输 功能描述 该项目将实现一个文字和文件传输的客户端和服务器程序通信应用程序.它将传输和接收视频文件. 文本消息必须通过TCP与服务器通信,而客户端自己用U ...
- 浅尝装饰器和AOP
[写在前面] 参考文章:https://www.cnblogs.com/huxi/archive/2011/03/01/1967600.html[从简单的例子入手进行讲解,由浅入深,很到位] 装饰器部 ...
- 笨方法学python中执行argv提示ValueError: not enough values to unpack (expected 4, got 1)
解决方法:选择Terminal中输入执行ex13.py 1 2 3 执行结果如下图
- Java字符串转数字和数字转字符串
int转String有3种方式 (1)num + "" (2)String.valueOf(num) (3)Integer.toString(num) String转int有2种方 ...
- 基于jpa的specification实现动态查询
spring data jpa为我们实现简单的crud操作提供了极大的方便.但大部分情况下,系统中都存在大量的动态查询操作,这个时候就可以借助spring data jpa的 Specificatio ...
- RabbitMQ处理未被路由的消息
我们经常使用消息队列进行系统之间的解耦,日志记录等等.但是有时候我们在使用 RabbitMQ时,由于exchange.bindKey.routingKey没有设置正确,导致我们发送给交换器(excha ...
- 2021.10.18考试总结[NOIP模拟76]
T1 洛希极限 不难发现每个点肯定是被它上一行或上一列的点转移.可以预处理出每个点上一行,上一列最远的能转移到它的点,然后单调队列优化. 预处理稍显ex.可以用并查集维护一个链表,记录当前点之后第一个 ...
- GEOS使用记录
由于需要计算GIS障碍物的缓冲区,所以研究了 一下GEOS库的使用,将使用的一些细节内容记录一下: 1.vs2010IDE无法编译较高版本的GEOS库,较高版本的库使用了更加高级的C++语法,如果想使 ...