Java调用高德API

需求

java后台异步传查询数据库中的多个地区经纬度,地图动态展示出来。

数据

在这里插入图片描述

代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>智新年票综合管理系统</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <jsp:include page="include/css.jsp"/>
    <style>
        html, body, #container {
            height: 100%;
            width: 100%;
        }

        .amap-icon img{
            width: 25px;
            height: 34px;
        }
    </style>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <jsp:include page="include/header.jsp"/>
    <jsp:include page="include/sider.jsp">
        <jsp:param name="menu" value="map"/>
    </jsp:include>
    <div class="content-wrapper">
        <section class="content">
            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">地图展示</h3>

                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip"
                                title="Collapse">
                            <i class="fa fa-minus"></i></button>
                        <button type="button" class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
                            <i class="fa fa-times"></i></button>
                    </div>
                </div>

                <div class="box-body">
                    <div class="input-card" style="display: none;">
                        <h4>地图自适应</h4>
                        <input id="setFitView" type="button" class="btn" value="地图自适应显示" />
                    </div>
                    <div id="container" style="width: 1070px;height:500px;" class="center-block"></div>
                    <div class="info">
                        <div id="centerCoord"></div>
                        <div id="tips"></div>

                    </div>

                </div>
            </div>
        </section>
    </div>
    <jsp:include page="include/footer.jsp"></jsp:include>
</div>
<jsp:include page="include/js.jsp"></jsp:include>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=0f6eb4c67d25f56e944caafeb67d9dc3"></script>
<script>
    var map = new AMap.Map('container', {
        resizeEnable: true,
        center: [116.397428, 39.90923],
        zoom: 13
    });

    map.clearMap();  // 清除地图覆盖物
    var markers = [];

    $.ajax({
        url:'/list',
        type: "GET",
        async: false, //设置为同步请求
        success: function (data) {
            if (data.state == "success") {
                var json = data.data;

                for(var i = 0; i < json.length; i++){
                    var store = json[i];
                    var j = i+1;
                    markers.push({icon:'//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-'+ j + '.png',position:[store.storeLongitude,store.storeLatitude]});

                }
            // markers = [{
            //     icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-1.png',
            //     position: [116.205467, 39.907761]
            // }, {
            //     icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-2.png',
            //     position: [116.368904, 39.913423]
            // }, {
            //     icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-3.png',
            //     position: [116.305467, 39.807761]
            // }];


                console.log(markers);

            } else {
                layer.msg(data.message);
            }
        },

        error: function () {
            layer.msg("系统异常");
        }
    });

   /*
   var markers = [{
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-1.png',
        position: [116.205467, 39.907761]
    }, {
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-2.png',
        position: [116.368904, 39.913423]
    }, {
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-3.png',
        position: [116.305467, 39.807761]
    }];
    */



    // 添加一些分布不均的点到地图上,地图上添加三个点标记,作为参照
    markers.forEach(function(marker) {

        new AMap.Marker({
            map: map,
            icon: marker.icon,

            position: [marker.position[0], marker.position[1]],
            offset: new AMap.Pixel(-13, -30)
        });

    });
    var center = map.getCenter();

    var centerText = '当前中心点坐标:' + center.getLng() + ',' + center.getLat();
    document.getElementById('centerCoord').innerHTML = centerText;
    document.getElementById('tips').innerHTML = '11111111!';

   // 添加事件监听, 使地图自适应显示到合适的范围
    AMap.event.addDomListener(document.getElementById('setFitView'), 'click', function() {
        var newCenter = map.setFitView();
        document.getElementById('centerCoord').innerHTML = '当前中心点坐标:' + newCenter.getCenter();
        document.getElementById('tips').innerHTML = '通过setFitView,地图自适应显示到合适的范围内,点标记已全部显示在视野中!';
    });

    $(document).ready(function(){
        $("setFitView").trigger("click")//自动实现点击
        // $("#setFitView").load("");//load加载
        document.getElementById('setFitView').click();
    });

</script>
</body>
</html>




效果展示

在这里插入图片描述

问题汇总

js数组循环赋值

 markers.push

ajax无法给全局变量赋值

在ajax中是无法给js中的全局变量赋值的,因为ajax默认是异步请求(当要赋值时,此时的值没有拿到,所以赋值不成功)。例如:


function test(){
  var result=0;
  $.ajax({  
type: "POST",  
url: "ajax/checkfor1.php?action=reg_checkEmail",          
data: {email:email},   
dataType: 'text',     
success: function(data){                                                      
results=data;  
},  
error: function() {     
               alert("异常!");    
      }    
});
}
 

执行时会发现赋不进去值

解决办法1:将ajax请求设置为同步请求


function test(){
  var result=0;
  $.ajax({  
type: "POST",  
url: "ajax/checkfor1.php?action=reg_checkEmail",          
data: {email:email},   
dataType: 'text',     
      async: false, //设置为同步请求
success: function(data){                                                      
results=data;  
},  
error: function() {     
               alert("异常!");    
      }    
});
}

解决办法2:不使用js全局变量存数据而是用隐藏的html标签存数据


function test(){
  var result=0;
  $.ajax({  
type: "POST",  
url: "ajax/checkfor1.php?action=reg_checkEmail",          
data: {email:email},   
dataType: 'text',     
success: function(data){                                                      
              $('#datastore').append('<div data='+data+'></div>');//使用一个div标签,定义一个自定义属性data来存储数据
},  
error: function() {     
               alert("异常!");    
      }    
});
}

加载多个markers无法显示图标

在这里插入图片描述
大量图标应采用加载海量点API
https://lbs.amap.com/api/javascript-api/example/marker/massmarks
在这里插入图片描述

自动添加点击事件

 $(document).ready(function(){
        // $("#setFitView").load("");//load加载
        document.getElementById('setFitView').click();
    });

参考:
https://lbs.amap.com/api/javascript-api/example/marker/adaptive-show-multiple-markers

推荐阅读
>>清欢的博客
>>学习交流或获取更多资料欢迎加入QQ群:874514813

©️2020 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值