当前位置:首页 > 技术 > HTML > 正文内容

高德点击获取经纬度代码

Watrt3年前 (2021-12-02)HTML13240
<!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>
</head>
<style type="text/css">
    html,body {
    width: 100%;
    height: 100%;
    margin: 0px;
}

.map {
    height: 100%;
    width: 100%;
    float: left;
}

.amap-icon img,
        .amap-marker-content img {
    width: 25px;
    height: 34px;
}
</style>

<body>
    <div id="container" class="map"></div>
    <div class="input-card">
        <h4>左击获取经纬度:</h4>
        <div class="input-item">
            <input type="text" readonly="true" id="lnglat">
        </div>
    </div>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.Autocomplete"></script>
    <script type="text/javascript">
        var map = new AMap.Map("container", {
            resizeEnable: true
        });
        var marker = new AMap.Marker({
            icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
            position: map.lnglat,
            offset: new AMap.Pixel(-13, -30)
        });
        marker.setMap(map);
         //为地图注册click事件获取鼠标点击出的经纬度坐标
        map.on('click', function(e) {
            marker.setPosition(e.lnglat);
            document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
        });
    </script>
</body>

</html>


分享给朋友:

相关文章

http状态码

http状态码

HTTP状态码(响应码)用来表明HTTP请求是否已经成功完成.HTTP响应类型一共分五大类:消息响应,成功响应,重定向,客户端错误,服务器端错误.下表列出了所有HTTP状态码,以及他们各自所代表的含义:状态码原因短语代表含义HTTP 版本消息响应100Continue(继续)客户端应当继续发送请求.这个临时响应是用来通知客户端它的部分请求已经被服务器接收,且仍未被拒绝.客户端应当继续发送请求的剩余部分,或者如果请求已经完成,忽略这个响应.服务器必须在请求完成后向客户端发送一个最终响应.HTTP/...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。