-*-  父页面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. 反调试--CRC检测

    #include"CRC32.h" #include<Windows.h> #include<iostream> using namespace std; ...

  2. 关于VS中的无法解析的外部符号问题

    利用caffe的源码编译出的caffe.lib静态链接库里面就包含了源码里面的那些函数的接口i,所以如果在程序中使用的是源码的话,就不需要在链接器里面再添加此静态链接库了 对于无法解析的外部符号,首先 ...

  3. CentOS7安装Python3和VIM8

    参考:http://blog.sina.com.cn/s/blog_45249ad30102yulz.html

  4. Geostatistical Analyst Tools（Geostatistical Analyst 工具）

    Geostatistical Analyst 工具 1.使用地统计图层 # Process: GA 图层至格网 arcpy.GALayerToGrid_ga("", 输出表面栅格, ...

  5. java 文档自动生成的神器 idoc

    写文档 作为一名开发者,每个人都要写代码. 工作中,几乎每一位开发者都要写文档. 因为工作是人和人的协作,产品要写需求文档,开发要写详细设计文档,接口文档. 可是,作为一个懒人,平时最讨厌的一件事情就 ...

  6. 题解「2017 山东一轮集训 Day1 / SDWC2018 Day1」Set

    题目传送门 题目大意 给出一个长度为 \(n\) 的数组,选出一些数异或之和为 \(s1\),其余数异或之和为 \(s2\),求 \(s1+s2\) 最大时 \(s1\) 的最小值. 思路 你发现如果 ...

  7. 未来云原生 | CIF 论坛精彩看点

    当下云原生技术正在飞速发展,那么如何准确理解「云原生」?在发展不够成熟,行业认知差异大的情况下,不论是云原生计算基金会(CNCF),还是行业的任何大咖,都不能给出精确的.便于理解的定义.我们要理解的逻 ...

  8. Java（35）IO特殊操作流&Properties集合

    作者:季沐测试笔记 原文地址:https://www.cnblogs.com/testero/p/15228454.html 博客主页:https://www.cnblogs.com/testero ...

  9. 初学Python-day13 文件处理1

    IO操作 一.os模块 作用:包含了操作系统的基本功能,提供了非常丰富的用来处理文件和目录的函数或方法. 1.属性 函数名 函数说明 name 获取操作系统的类型 uname 获取操作系统的信息(li ...

  10. 264.丑数II

    题目 给你一个整数 n ,请你找出并返回第 n 个 丑数 . 丑数 就是只包含质因数 2.3 和/或 5 的正整数. 示例 1: 输入:n = 10 输出:12 解释:[1, 2, 3, 4, 5, ...