高德地图 点击获取坐标

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_39461487/article/details/81563501

<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>