-*-  父页面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(子页面数据返回父页面并设值) + 单个点标记 + 点标记经纬度 + 回显 + 限制地图显示范围+搜索)的更多相关文章

  1. 高德地图 js api 使用

    使用高德地图js api 制作网页上的地图应用. 1.先申请一个 开发者用的 key . 2. 在页面中引入高德提供的地图js  <script src="http://webapi. ...

  2. 高德地图 JS API - 根据地名实现标记定位

    德地图 JS API 使用前的准备工作请参考官方网站说明: https://lbs.amap.com/api/javascript-api/guide/abc/prepare 根据地名实现地图标记定位 ...

  3. 腾讯地图JS API实现带方向箭头的线路Polyline

    最近产品提出一个需求,在我们使用的腾讯地图上为线路polyline添加线路方向.例如下图所示: 查找腾讯地图JS API提供的API,没有找到对应的支持,询问负责腾讯地图的人也得到了同样的答案,即地图 ...

  4. JS实现关闭当前子窗口，刷新父窗口及调用父窗口的方法

    一.js实现关闭当前子窗口,刷新父窗口 JS代码如下: <script> function refreshParent() {  window.opener.location.href = ...

  5. JS实现关闭当前子窗口，刷新父窗口

    一.JS实现关闭当前子窗口,刷新父窗口 JS代码如下: <script> function refreshParent() {  window.opener.location.href = ...

  6. 关闭open页面时刷新父页面列表

    var winObjEI = window.open("/Invoice/InvoiceViewEI?invoiceid=" + data.InvoiceId); ; //关闭op ...

  7. Spring MVC中Controller如何将数据返回给页面

    要实现Controller返回数据给页面,Spring MVC 提供了以下几种途径: ModelAndView:将视图和数据封装成ModelAndView对象,作为方法的返回值,数据最终会存到Http ...

  8. 子组件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 ...

  9. jQuery如何去判断页面是否有父页面？

    jQuery如何去判断页面是否有父页面?     是要判断当前页面是否被嵌入在frame里吗? 1 2 3 if (top != self) {     alert('我在框架里'); }

随机推荐

  1. scheduler源码分析——preempt抢占

    前言 之前探讨scheduler的调度流程时,提及过preempt抢占机制,它发生在预选调度失败的时候,当时由于篇幅限制就没有展开细说. 回顾一下抢占流程的主要逻辑在DefaultPreemption ...

  2. 题解 CF736D Permutations

    link Description 现在,你有一个二分图,点数为 \(2n\). 已知这个二分图的完备匹配的个数是奇数. 现在你要知道,删除每条边后,完备匹配个数是奇数还是偶数. \(1\le n\le ...

  3. B - Ancient Cipher POJ - 2159 解题报告

    内容: Ancient Roman empire had a strong government system with various departments, including a secret ...

  4. 将DataFrame赋值为可变变量在spark中多次赋值后运行速度减慢的问题

    该问题先标记上,之后有空了研究原因. 在var dataframe后将dataframe作为参数输入某方法,将结果重新赋予该dataframe,会导致spark运行显著减慢速度.暂时不知道原因,之后研 ...

  5. mbps和MB/s是怎么换算的

    Mbps即"传输速率",也叫"带宽".去营业厅开网线的时候会问开几兆的宽带,这里说的"几兆的宽带"就是指多少Mbps,但是Mbps和MB/s ...

  6. 零基础玩转C语言单链表

    下图为最一简单链表的示意图: 第 0 个结点称为头结点,它存放有第一个结点的首地址,它没有数据,只是一个指针变量.以下的每个结点都分为两个域,一个是数据域,存放各种实际的数据,如学号 num,姓名 n ...

  7. 轻松掌握stm32直流电机驱动与测速

    说实话就现在的市场应用中stm32已经占到了绝对住到的地位,51已经成为过去式,32的功能更加强大,虽然相应的难度有所增加,但是依然阻止不了大家学习32的脚步,不说大话了这些大家都懂要不然也不会学习s ...

  8. Linux C 数据结构 ->单向链表

    之前看到一篇单向链表的博文,代码也看着很舒服,于是乎记录下来,留给自己~,循序渐进,慢慢 延伸到真正的内核链表~(敢问路在何方?路在脚下~) 1. 简介 链表是Linux 内核中最简单,最普通的数据结 ...

  9. 算法：数字推盘游戏--重排九宫（8-puzzle）

    一.数字推盘游戏 数字推盘游戏(n-puzzle)是一种最早的滑块类游戏,常见的类型有十五数字推盘游戏和八数字推盘游戏等.也有以图画代替数字的推盘游戏.可能Noyes Palmer Chapman在1 ...

  10. 使用 ASP.NET Core 3.1 的微服务开发指南

    使用 ASP.NET Core 3.1 的微服务 – 终极详细指南 https://procodeguide.com/programming/microservices-asp-net-core/ A ...