高德地图 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: '', 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=" 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="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>