高德地图点击获取坐标

刺骨的言语ヽ痛彻心扉 2022-05-17 11:09 498阅读 0赞

<link href="<?=Yii::getAlias('@resUrl/css/manage.css');?>" rel="stylesheet">
    <div class="panel panel-default">
        <div class="panel-body">
            <div id="container" class="col-sm-8" style="height:600px;"></div>
            <div class="fl col-sm-3" style="margin-left: 30px;">
                <textarea name="point" id="latDiv" class="form-control" readonly rows="10"></textarea>
            </div>
            <br>
        </div>
    </div>
    <script type="text/javascript" src="<?=Yii::getAlias('@resUrl/js/jquery.min.js')?>"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.4&key=<?=Yii::$app->params['amapKey'];?>"></script>
    <script>
        $(function () {
            var map = new AMap.Map('container',{
                resizeEnable: true,
                zoom: 12
            });
            AMap.event.addListener(map, 'click', getLnglat); //点击事件
            /**
             * 点击获取坐标
             * @param e
             */
            function getLnglat(e) {
                map.clearMap();
                var x = e.lnglat.getLng();
                var y = e.lnglat.getLat();
                document.getElementById("latDiv").innerHTML = '[' + x + "," + y + ']';
                var marker = new AMap.Marker({
                    icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                    position: [x, y]
                });
                marker.setMap(map);
            }
        });
    </script>

![70][]

[70]: /images/20220517/c00c649b5a754b1baece67eca7ae0481.png

发表评论取消回复

表情：

评论列表（有 0 条评论，498人围观）

还没有评论，来说两句吧...

相关阅读

相关高德地图获取经纬度坐标

[高德地图获取经纬度坐标： https://lbs.amap.com/console/show/picker][https_lbs.amap.com_console_show_

川长思鸟来/ 2023年07月17日 11:17/ 0 赞/ 6 阅读

相关 vue+高德地图点击地图获取经纬度和详细地址

html源码： <div id="my\_container"></div> js源码： export default \{ name: "company\_ma

淩亂°似流年/ 2023年05月21日 07:08/ 0 赞/ 6 阅读

相关获取地图多边形点坐标

一、百度地图AK密钥申请 1、密钥申请地址：http://lbsyun.baidu.com/apiconsole/key 2、密钥申请配置：（1）应用类型：浏览器端；

水深无声/ 2023年03月14日 05:30/ 0 赞/ 308 阅读

相关高德地图点聚合功能加点击事件

效果展示 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

怼烎@/ 2023年01月03日 04:48/ 0 赞/ 322 阅读

相关 Openlayers中点击地图获取坐标并输出

场景 Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示： [https://blog.csdn.net/BADAO\_LIUM

向右看齐/ 2022年10月18日 15:58/ 0 赞/ 322 阅读

相关高德地图通过地图点击复制指定行政区域的经纬度数据

高德地图通过地图点击复制指定行政区域的经纬度数据高德地图官方提供了获取鼠标点击经纬度的方法（高德地图官方文档） [获取鼠标点击经纬度][Link 1] 截图如

客官°小女子只卖身不卖艺/ 2022年10月18日 01:00/ 0 赞/ 317 阅读

相关高德地图打点

高德地图API的使用看官方文档就能很容易的上手。在高德地图的使用过程中，了解了一些关于地图的需求与使用。复习了一下地理知识：经纬度还复习了一下数学知识

桃扇骨/ 2022年07月16日 06:52/ 0 赞/ 430 阅读

相关高德地图点击获取坐标

<link href="<?=Yii::getAlias('@resUrl/css/manage.css');?>" rel="stylesheet">

刺骨的言语ヽ痛彻心扉/ 2022年05月17日 11:09/ 0 赞/ 499 阅读

相关 vue接入高德地图点击获取经纬度及省市区

1. 安装vue-amap npm install --save vue-amap 1. 在main.js中引入如下 // 引入地图 impo

超、凢脫俗/ 2021年11月02日 10:38/ 0 赞/ 674 阅读

相关 Vue - 高德地图获取所点击位置的经纬度坐标

一. 在最外层的html.js中引入高德key ![在这里插入图片描述][20200519103055746.png] ![在这里插入图片描述][watermark_t

本是古典何须时尚/ 2021年07月26日 02:52/ 0 赞/ 2023 阅读