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

高德点击获取经纬度代码

watrt2个月前 (12-02)HTML710
<!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>


分享给朋友:

相关文章

安装文档服务(Document Server)

安装文档服务(Document Server)

安装文档服务(Document Server)ONLYOFFICE Document Server基于nodejs和c编写,以Nginx作为反向代理服务器,PostgreSQL作为数据库。需要提前安装以下以依赖:libcurl3libxml2supervisorfonts-dejavufonts-liberationttf-mscorefonts-installerfonts-crosextra-carlitofonts-takao-gothicfonts-opensymbol 这些依...

发表评论

访客

看不清,换一张

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