zoukankan      html  css  js  c++  java
  • 高德地图 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>
  • 相关阅读:
    Kvm virsh
    lvs tunl
    django表单使用
    django上传图片
    django框架admin使用
    django模板的使用
    django数据库操作
    django数据库交互
    django数据库中
    django之类视图
  • 原文地址:https://www.cnblogs.com/mysterious-killer/p/11125225.html
Copyright © 2011-2022 走看看