高德地图 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('我在框架里'); }
随机推荐
- PC Register简介
PC Regiter介绍: JVM中的程序计数寄存器(Program Counter Register)中,Register的命名源于CPU的寄存器,寄存器存储指令相关的现场信息,CPU只有把数据装载 ...
- 一个故事，一段代码告诉你如何使用不同语言（Golang&C#）提供相同的能力基于Consul做服务注册与发现
目录 引言 什么是微服务 传统服务 微服务 什么是服务注册与服务发现 为什么要使用不同的语言提供相同的服务能力 服务协调器 服务注册 Golang C#(.NetCore3.1) 服务发现 通过Htt ...
- a标签的href属性拼接问题
<a id="nickName" href="/community/user/userinfo?nickName="></a> 如上所示 ...
- 自定义ConditionalOnXX注解
一.Conditional注解介绍 对SpringBoot有足够了解的小伙伴应该都用过Conditional系列注解,该注解可用在类或者方法上用于控制Bean的初始化. 常用的Conditional注 ...
- SpringCloud微服务实战——搭建企业级开发框架（四）：集成SpringCloud+SpringBoot
1.在GitEgg工程的根目录,最上级父pom.xml文件中引入需要依赖的库及Maven插件,设置编码方式: <!--?xml version="1.0" encoding= ...
- 使用cerebro可视化ElasticSearch集群信息
使用cerebro可视化ElasticSearch集群信息 一.背景 二.安装步骤 1.下载并解压 2.配置cerebro 3.启动 cerebro 4.启动界面 三.注意事项 四.参考文档 一.背景 ...
- Prometheus之告警规则的编写
Prometheus之告警规则的编写 一.前置知识 二.需求 三.实现步骤 1.编写告警规则 2.修改prometheus.yml执行告警规则的位置 3.配置文件截图 4.页面上看告警数据信息 5.查 ...
- elf文件--基于《ctf竞赛权威指南pwn篇》
1.ELF概念: ELF(Executable and Linkable Format),即"可执行可链接格式",最初由UNIX系统实验室作为应用程序二进制接口(Applicati ...
- 单片机stm32 USART串口实际应用解析
stm32作为现在嵌入式物联网单片机行业中经常要用多的技术,相信大家都有所接触,今天这篇就给大家详细的分析下有关于stm32的出口,还不是很清楚的朋友要注意看看了哦,在最后还会为大家分享有些关于stm ...
- 计算机网络之网络层移动IP
文章转自:https://blog.csdn.net/weixin_43914604/article/details/105319753 学习课程:<2019王道考研计算机网络> 学习目的 ...