-*- 父页面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>