高德地图 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>
原文地址:https://www.cnblogs.com/mysterious-killer/p/11125225.html