HTML页面配置高德地图，获取位置

最新推荐文章于 2024-09-09 22:16:15 发布

bug0到1

最新推荐文章于 2024-09-09 22:16:15 发布

阅读量174

点赞数 3

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_55841258/article/details/141963503

版权

HTML页面配置高德地图，获取位置

一、使用情况

1、之前项目用的前后端分离框架，所以用Vue接入的高德地图，自动搜索补全，是请求的后台返回的数据。
2、现在用单体项目，前端是Bootstrap，需要接高德地图，自动搜索补全，直接是前端请求数据，没有通过后台。
3、申请key的方式，可以看之前的文档。此处需要注意，如下图：
在这里插入图片描述

二、功能介绍

1、打开地图，鼠标点击获取经纬度，并标记
2、输入搜索条件，提示对应相关信息，下拉选择
3、点击对应数据，地图跳转该位置，并标记

三、效果图

在这里插入图片描述

四、HTML页面

1、页面代码
注：为了测试，此处安全密钥直接配置在了代码中，其余方式可参考JS API 安全密钥使用

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>鼠标拾取地图坐标</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>

    <script type="text/javascript" src="https://webapi.amap.com/ui/1.0/main.js"></script>
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
<div id="container" class="map"></div>
<div id="myPageTop">
    <table>
        <tr>
            <td>
                <label>请输入关键字：</label>
            </td>
        </tr>
        <tr>
            <td>
                <input id="tipinput"/>
            </td>
        </tr>
    </table>
</div>
<div id="autodiv"></div>
<div class="input-card">
    <h4>左击获取经纬度：</h4>
    <div class="input-item">
        <input type="text" readonly="true" id="lnglat">
    </div>
</div>

<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode: "对应的安全密钥",
    };
</script>
<script src="https://webapi.amap.com/maps?v=2.0&key=自己申请的Web端(JS API)&plugin=AMap.AutoComplete"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<script type="text/javascript">
    var marker, map = new AMap.Map("container", {
        zoom: 11,
        resizeEnable: true,
        center: [116.397428, 39.90923], //地图中心点
    });

    //输入提示
    var autoOptions = {
        input: "tipinput"
    };
    AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], function(){
        var auto = new AMap.AutoComplete(autoOptions);
        var placeSearch = new AMap.PlaceSearch({
            map: map
        });  //构造地点查询类
        auto.on("select", select);//注册监听，当选中某条记录时会触发
        function select(e) {
            placeSearch.setCity(e.poi.adcode);
            placeSearch.search(e.poi.name);  //关键字查询查询
            var latLngArr = [e.poi.location.lng, e.poi.location.lat]
            //添加标记
            map.clearMap();
            marker = new AMap.Marker({
                icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
                position: [e.poi.location.lng, e.poi.location.lat],
                offset: new AMap.Pixel(-13, -30)
            });
            marker.setMap(map);
            map.setCenter(latLngArr);
            document.getElementById("lnglat").value = e.poi.location.lng + ',' + e.poi.location.lat
        }
    });

    //为地图注册click事件获取鼠标点击出的经纬度坐标
    map.on('click', function(e) {
        document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
        var latLngArr = [e.lnglat.getLng(), e.lnglat.getLat()]
        //添加标记
        map.clearMap();
        marker = new AMap.Marker({
            icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
            position: [e.lnglat.getLng(), e.lnglat.getLat()],
            offset: new AMap.Pixel(-13, -30)
        });
        marker.setMap(map);
        map.setCenter(latLngArr);
    });
</script>
</body>
</html>

一个在学习的开发者，勿喷，欢迎交流