Java调用高德API

你的名字 2022-03-02 08:40 141阅读 0赞

## 需求 ##

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

## 数据 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODQwMjUx_size_16_color_FFFFFF_t_70]

## 代码 ##

<%@ 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>
        
        <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>

## 效果展示 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODQwMjUx_size_16_color_FFFFFF_t_70 1]

## 问题汇总 ##

### js数组循环赋值 ###

markers.push

### ajax无法给全局变量赋值 ###

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

执行时会发现赋不进去值

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

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

### 加载多个markers无法显示图标 ###

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

### 自动添加点击事件 ###

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

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

> 推荐阅读  
> [>>清欢的博客][Link 1]  
> [>>学习交流或获取更多资料欢迎加入QQ群：874514813][QQ_874514813]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODQwMjUx_size_16_color_FFFFFF_t_70]: /images/20220302/c4f3dcad313447ddad5d957c2e61c98d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODQwMjUx_size_16_color_FFFFFF_t_70 1]: /images/20220302/8c00ba1532824e27bf96a4786b1fb104.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODQwMjUx_size_16_color_FFFFFF_t_70 2]: /images/20220302/692bc64b779e476c934bc28b604ecd80.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODQwMjUx_size_16_color_FFFFFF_t_70 3]: /images/20220302/902c6d622451428ba32351d5a1d27954.png
[Link 1]: https://ysygitee.gitee.io/
[QQ_874514813]: https://jq.qq.com/?_wv=1027&k=5KVEQ2o