高德地图点击获取坐标

刺骨的言语ヽ痛彻心扉 2022-05-17 11:09 566阅读 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 条评论，566人围观）

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

相关阅读

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

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

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

相关 python基于高德地图坐标拾取系统获取地址坐标

基于高德坐标拾取系统: [https://lbs.amap.com/console/show/picker][https_lbs.amap.com_console_show_

曾经终败给现在/ 2023年06月16日 07:24/ 0 赞/ 25 阅读

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

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

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

相关 echarts地图，点击地图获取坐标

myChartMap.setOption(optionmap); myChartMap.on('click', function (params) {

Myth丶恋晨/ 2023年01月23日 09:50/ 0 赞/ 28 阅读

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

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

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

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

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

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

相关高德地图打点

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

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

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

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

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

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

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

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

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

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

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