-*-  父页面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. 100台机器上海量IP如何查找出现频率 Top 100？

    场景题 有 100 机器,每个机器的磁盘特别大,磁盘大小为 1T,但是内存大小只有 4G,现在每台机器上都产生了很多 ip 日志文件,每个文件假设有50G,那么如果计算出这 100 太机器上访问量最多 ...

  2. Apache ShardingSphere 邀您相约 Open Source Day

    Apache ShardingSphere 很荣幸接受 AnitaB.org 的邀请参加 OpenSourceDay Summer 2021 活动. Open Source Day (OSD) 是一个 ...

  3. k8s调度器介绍（调度框架版本）

    从一个pod的创建开始 由kubectl解析创建pod的yaml,发送创建pod请求到APIServer. APIServer首先做权限认证,然后检查信息并把数据存储到ETCD里,创建deployme ...

  4. git GUI Clients

    git GUI Clients Git 自带用于提交 (git-gui) 和浏览 (gitk) 的内置 GUI 工具,但也有一些第三方工具供寻求特定平台体验的用户使用. References Git ...

  5. C++ 与 Visual Studio 2019 和 WSL

    Visual Studio 使用 C++ 的 Linux 开发(WSL) https://devblogs.microsoft.com/cppblog/c-with-visual-studio-201 ...

  6. 对epoll机制的学习理解v1

    epoll机制 wrk用非阻塞多路复用IO技术创造出大量的连接,从而达到很好的压力测试效果.epoll就是实现IO多路复用的关键. 本节是对epoll的本质的学习总结,进一步的参考资料为: <深 ...

  7. 【UE4 C++ 基础知识】<9> Interface 接口

    概述 简单的说,接口提供一组公共的方法,不同的对象中继承这些方法后可以有不同的具体实现. 任何使用接口的类都必须实现这些接口. 实现解耦 解决多继承的问题 蓝图使用 使用方法 三种调用方法的区别 调用 ...

  8. 4个实验，彻底搞懂TCP连接的断开

    前言 看到这个标题你可能会说,TCP 连接的建立与断开,这个我熟,不就是三次握手与四次挥手嘛.且慢,脑海中可以先尝试回答这几个问题: 四次挥手是谁发起的? 如果断电/断网了连接会断开吗? 什么情况下没 ...

  9. rocketMQ(一)基础环境

    一.安装: http://rocketmq.apache.org/dowloading/releases/ https://www.apache.org/dyn/closer.cgi?path=roc ...

  10. 软件工程个人博客作业-软件案例分析：VS与VS Code

    项目 内容 本作业属于北航 2020 年春软件工程 博客园班级连接 本作业是本课程个人项目作业 作业要求 我在这个课程的目标是 提高软件开发能力.团队协作能力 这个作业在哪个具体方面帮助我实现目标 提 ...