高德地图 JS API (jsp + miniui(子页面数据返回父页面并设值) + 单个点标记 + 点标记经纬度 + 回显 + 限制地图显示范围)...

最新推荐文章于 2022-10-12 20:30:00 发布

aibeng2705

最新推荐文章于 2022-10-12 20:30:00 发布

阅读量276

点赞数

文章标签： java javascript ViewUI

原文链接：http://www.cnblogs.com/mysterious-killer/p/11125225.html

版权

-*- 父页面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"%>
<%@page import="com.e6soft.base.util.WebUtil"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

    String longitude = WebUtil.getParam("longitude");
    String latitude = WebUtil.getParam("latitude");
%>

<!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>
<!-- 加载地图JSAPI脚本 -->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script>
    mini.parse();
    var lng = "<%=longitude%>";  // 经度
    var lat = "<%=latitude%>"; // 纬度 
    $(function(){  // jQuery 
        lockMapBounds();
        if(lng!="" && lat!="" ){
            console.log("不为空-*-"); 
            addMarker(Number(lng),Number(lat)); // 转成 int 
            // setPosition(lnglat:LngLat)        设置点标记位置
            //var overlays = map.getAllOverlays("marker"); // 获得  marker 类型的数据
            //var position = overlays.setPosition(lng:lat);  // 设置点标记位置
        }
    });
    
    //限制地图显示范围
    function lockMapBounds() {
      var bounds = map.getBounds();
      map.setLimitBounds(bounds); 
    }
     
    var map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom:11, //初始化地图层级
        center: [113.12, 23.02] //初始化地图中心点
    });
    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(-10, -34)
        });
        marker.setMap(map);
    }
    // 清除 marker
    function clearMarker() { 
        // 清除地图上所有添加的覆盖物
        map.clearMap();
    } 
     
    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

aibeng2705

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
高德地图 JS API (jsp + miniui(子页面数据返回父页面并设值) + 单个点标记 + 点标记经纬度 + 回显 + 限制地图显示范围)...

-*- 父页面jsfunction mapFocus(){ //console.log("-*-"); var longitude = mini.get("jd").getValue(); // 经度 var latitude = mini.get("wd").getValue(); // 纬度 var u...
复制链接

扫一扫