高德地图api显示标记点及封闭区域

曾经终败给现在 2022-09-10 06:26 511阅读 0赞

直接上代码

--------------------

先编写一个取经纬度页面(该页面使用的是百度地图坐标转高德地图坐标)，将得到的经纬度存到数据库等待使用：

<html xmlns:th="http://www.w3.org/1999/xhtml">
    <head>
        <title>根据地址查询经纬度</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
    </head>
    <body style="background:#CBE1FF">
    <form class="layui-form my-form-class">
        <div style="width:745px;margin:auto;">
            要查询的地址：
            市：<input id="city" type="text" th:value="${city}"/>
            区域：<input id="text_" type="text" th:value="${positionName}"/>
            <input type="button" value="查询" onclick="searchStationName();"/>
            <br>
            查询结果(经纬度)：<input id="result_" type="text" th:value="${position}"/>
            <div id="container"
                 style="position: absolute;
                    margin-top:30px;
                    width: 600px;
                    height: 500px;
                    top: 50;
                    border: 1px solid gray;
                    overflow:hidden;">
            </div>
        </div>
        <div class="form-inline my-page-btn" style="padding-left: 120px;">
            <button lay-submit type="button" id="sure" lay-filter="sure" class="btn btn-default btn-sm btnMargin"><img
                    src="/images/tick.png"/>确定
            </button>
            <button type="button" id="close" class="btn btn-default btn-sm btnMargin"><img src="/images/cancel.png"/>关闭
            </button>
        </div>
    </form>
    </body>
    <div th:include="include :: footer"></div>
    <script type="text/javascript">
        var points = null;
        var map = new BMap.Map("container");
        map.centerAndZoom("北京", 12);//这里是初始地图所显示的城市
        map.enableScrollWheelZoom(true);    //启用滚轮放大缩小，默认禁用
        map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
    
        map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
        map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
    
        var localSearch = new BMap.LocalSearch(map);
        localSearch.enableAutoViewport(); //允许自动调节窗体大小
    
        var showArea = function (city, area) {
            queryHouse(area, city, "填你自己的百度密钥", function (data) {
                if (data.message == 'ok') {
                    var houses = data.results;
                    if (houses && houses.length > 0) {
                        var house = houses[0];
                        queryHouseOutline(house.uid, function (houseOutline) {
                            var geo = houseOutline.content.geo;
                            var geoObj = parseGeo(geo);
                            points = coordinateToPoints(map, geoObj.points);//得到该区域封闭区域的所有经纬度
                            //console.log(points[0].lng+"-"+points[0].lat);
                        });
                    }
                }
            });
        };
    
        function searchStationName() {
            showArea($("#city").val(), $("#text_").val());
            map.clearOverlays();//清空原来的标注
            var keyword = document.getElementById("text_").value;
            localSearch.setSearchCompleteCallback(function (searchResult) {
                var poi = searchResult.getPoi(0);
                //将百度坐标转换成高德坐标
                var bdDecrypt = bd_decrypt(poi.point.lng,poi.point.lat);
                document.getElementById("result_").value = bdDecrypt.lng + "," + bdDecrypt.lat;//将标记点经纬度显示在文本框
                map.centerAndZoom(poi.point, 17);
                var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));  //创建标注点
                map.addOverlay(marker);
                var content = document.getElementById("text_").value + "<br/><br/>经度：" + poi.point.lng + "<br/>纬度：" + poi.point.lat;
                var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
                marker.addEventListener("click", function () {
                    this.openInfoWindow(infoWindow);
                });
                // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            });
            localSearch.search(keyword);
        }
    
        searchStationName();
    
        layui.use(['form', 'layer', 'jquery'], function () {
    
            var form = layui.form
                , layer = layui.layer,
                $ = layui.jquery;
            ;
    
            var index = parent.layer.getFrameIndex(window.name);
    
            $("#close").click(function () {
                parent.layer.close(index); //再执行关闭
            });
    
            $("#sure").click(function () {
                var arr = [];
                for (p in points)  //将多个点循环存入数组，得到polygon面
                {
                    if(typeof(points[p].lng) != "undefined"){
                        //将百度坐标转换成高德坐标
                        var bdDecrypt = bd_decrypt(points[p].lng,points[p].lat);
                        arr.push(bdDecrypt.lng+" "+bdDecrypt.lat);
                    }
                }
                var positionName = $("#city").val() + "-" + $("#text_").val();
                var position = $("#result_").val();
                //将得到的值传到父页面(此页面为子页面)
                $("#position", window.parent.frames[0].document).val(position);
                $("#positionName", window.parent.frames[0].document).val(positionName);
                $("#polygon", window.parent.frames[0].document).val(arr);
                parent.layer.close(index);
            });
        })
    </script>
    </html>

编写显示地图页面，将标记点和封闭区域显示出来：

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head lang="en" th:include="include :: header">
        <meta charset="UTF-8">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"/>
        <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
        <title></title>
        <style type="text/css"></style>
        <title>地图</title>
    </head>
    <body>
    <div class="demo_main">
        <div style="min-height: 700px; width: 100%;" id="map">
        </div>
        <div id="myPageTop">
            <table>
                <tr>
                    <td>
                        <label>请输入关键字：</label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input id="tipinput" autocomplete="off"/>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div th:include="include :: footer"></div>
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德密钥&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
    <script th:inline="javascript">
        var markerArrs = [[${allSmallArea}]];
        var markerArr = JSON.parse(markerArrs);//转成json数据格式
    
        var map = new AMap.Map('map', {//设置地图中心点
            center: [117.000923, 36.675807],
            zoom: 11,
            // pitch:75, // 地图俯仰角度，有效范围 0 度- 83 度
            // viewMode:'3D' // 地图模式
        });
    
        AMap.plugin('AMap.ToolBar', function () {//启用滚轮放大缩小
            var toolbar = new AMap.ToolBar();
            map.addControl(toolbar);
        });
    
        var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
    
        for (var i = 0; i < markerArr.length; i++) { //多个构造点标记
            var p;
            var pos0 = markerArr[i].position.substring(6).split(" ")[0];
            var pos1 = markerArr[i].position.substring(6).split(" ")[1].replace(')', '');
            var marker = new AMap.Marker({
                icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                position: [pos0, pos1],
                map: map
            });
            addInfoWindow(markerArr[i]);
    
            if (typeof (markerArr[i].polygon) != "undefined" || markerArr[i].polygon != null) { //显示多个封闭区域
                p = markerArr[i].polygon.substring(9).replace("))","");
                var points = coordinateToPointsByGD(map, p);
                var polygon1 = new AMap.Polygon({
                    path: points,
                    strokeColor: 'red',
                    strokeWeight: 2,
                    fillOpacity: .5
                });
                map.add([polygon1]);
                map.setFitView();
            }
        }
    
        //点击标记点显示窗口信息
        function addInfoWindow(poi) {
            //窗口标题
            var title = '<div style="font-weight:bold;color:#CE5521;font-size:14px">' + poi.haName + '</div>';
            //窗口信息
            var html = [];
            html.push('<p style="font-size:12px;line-height:1.8em">' + "地址：" + poi.addr + "</br> 小区编号：" + poi.areaNo + '</br></p>');
            marker.content = title + html;
            marker.on('click', markerClick);
            //marker.emit('click', {target: marker});//默认显示
        }
    
        function markerClick(e) {
            infoWindow.setContent(e.target.content);
            infoWindow.open(map, e.target.getPosition());
        }
    
        map.setFitView();
    
        //输入提示
        var autoOptions = {
            input: "tipinput"
        };
        var auto = new AMap.Autocomplete(autoOptions);
        var placeSearch = new AMap.PlaceSearch({
            map: map
        });  //构造地点查询类
        AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
        function select(e) {
            placeSearch.setCity(e.poi.adcode);
            placeSearch.search(e.poi.name);  //关键字查询查询
        }
    </script>
    </body>
    </html>

下面是用到的js方法：

/**
     * 模糊查询小区信息
     * @param {} house    小区名称
     * @param {} city     城市名称
     * @param {} ak       百度地图ak
     * @param {} callback 回调函数，该函数可以接收到请求的返回值
     */
    var queryHouse = function (house, city, ak, callback) {
        var baseURL = 'http://api.map.baidu.com/place/v2/search?output=json&scope=2';
        var url = baseURL + "&q=" + house + "&region=" + city + "&ak=" + ak;
        callback && (window.queryHouseCallback = callback);
        $.ajax({
            type: "get",
            async: false,
            url: url,
            dataType: "jsonp",
            jsonpCallback: "queryHouseCallback",
            success: function (datas) {
            }
        });
    };
    
    //地图相关(百度)
    var queryHouseOutline = function (hid, callback) {
        var baseURL = 'http://map.baidu.com/?reqflag=pcmap&coord_type=3&from=webmap&qt=ext&ext_ver=new&l=18';
        var url = baseURL + "&uid=" + hid;
        callback && (window.queryHouseOutlineCallback = callback);
        $.ajax({
            type: "get",
            async: false,
            url: url,
            dataType: "jsonp",
            jsonpCallback: "queryHouseOutlineCallback",
            success: function (datas) {
            }
        });
    };
    
    //百度坐标转高德（传入经度、纬度）
    function bd_decrypt(bd_lng, bd_lat) {
        var X_PI = Math.PI * 3000.0 / 180.0;
        var x = bd_lng - 0.0065;
        var y = bd_lat - 0.006;
        var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);
        var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
        var gg_lng = z * Math.cos(theta);
        var gg_lat = z * Math.sin(theta);
        return {lng: gg_lng, lat: gg_lat}
    }
    
    //将拿到的经纬度字符串逗号分割并存入数组
    var coordinateToPointsByGD = function (map, coordinate) {
        var points = [];
        if (coordinate) {
            var arr = coordinate.split(",");
            if (arr) {
                for (var i = 0; i < arr.length; i++) {
                    var coord = arr[i].split(" ");
                    points.push(new AMap.LngLat(coord[0], coord[1]));
                }
            }
        }
        return points;
    };

效果演示：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAWmFydGlsbGVyeQ_size_20_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAWmFydGlsbGVyeQ_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/3537195ff44a437291b7e9f0e579f112.png