高德地图搜索标记简单使用

谁借莪１个温暖的怀抱￠ 2023-07-03 06:24 55阅读 0赞

效果

地图上点击即标记，并解析坐标的位置，标记点可拖动  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9jaGVuZ2dhb3dlaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]  
输入搜索

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9jaGVuZ2dhb3dlaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]

# 引入 #

# 代码 #

<body>
        <div id="container"></div>
        <div id="myPageTop">
            <table>
                <tr>
                    <td>
                        <label>tips：点击地图标记打卡位置</label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input id="tipinput" placeholder="输入关键字搜索位置" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <button id="addMarker" onclick="addMarker()">保存标记地点</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button id="clearMarker" onclick="clearMarker()">删除标记地点</button>
                    </td>
                </tr>
            </table>
    
        </div>
        <script type="text/javascript">
            //地图加载
            var map = new AMap.Map("container", {
                resizeEnable: true
            });
            //输入提示
            var autoOptions = {
                input: "tipinput"
            };
            var auto = new AMap.Autocomplete(autoOptions);
            var placeSearch = new AMap.PlaceSearch({
                map: map
            });  //构造地点查询类
            AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
            function select(e) {
                placeSearch.setCity(e.poi.adcode);
                placeSearch.search(e.poi.name);  //关键字查询查询
            }
    
            var lnglat, address;
            var geocoder, marker;
    
            // 地图点击时，获取点击地经纬度
            map.on('click', function (e) {
                console.info(e)
                lnglat = e.lnglat;
                regeoCode();
            })
    
    
            function addMarker() {
                if (!lnglat || !address) {
                    alert("请标记打卡地点")
                } else {
                    console.info(address)
                    console.info(lnglat)
                }
            }
    
            function clearMarker() {
                if (lnglat || address) {
                    map.remove([marker]);
                    lnglat = null;
                    address = null;
                }
            }
    
    
    
            function regeoCode() {
                if (!geocoder) {
                    geocoder = new AMap.Geocoder();
                }
    
                geocoder.getAddress(lnglat, function (status, result) {
                    if (status === 'complete' && result.regeocode) {
                        address = result.regeocode.formattedAddress;
                        // alert("打卡签到位置：\n" + address + "\n坐标：" + lnglat);
                        document.getElementById("position").innerHTML = "标记位置：" + address;
                        //$('#address').val(address);//点击地名称
                        //$('#longitude').val(lnglat.lng);//经纬度
                        //$('#latitude').val(lnglat.lat);
                    }
                });
    
    
                // 自定义点标记内容
                var markerContent = document.createElement("div");
    
                // 点标记中的图标
                var markerImg = document.createElement("img");
                markerImg.className = "markerlnglat";
                markerImg.src = "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png";
                markerContent.appendChild(markerImg);
    
                // 点标记中的文本
                var markerSpan = document.createElement("span");
                markerSpan.className = 'marker';
                markerSpan.setAttribute("id", "position");
                markerSpan.innerHTML = "位置";
                markerContent.appendChild(markerSpan);
    
    
                if (!marker) {
                    marker = new AMap.Marker({ content: markerContent, draggable: true });
                    map.add(marker);
                }
                marker.setPosition(lnglat);//设置标记的位置
    
                marker.setMap(map);//在地图上显示一个标记
    
                marker.on('dragging', function (marker) {
                    // console.info(marker)
                    lnglat = marker.lnglat;
                    geocoder.getAddress(lnglat, function (status, result) {
                        //console.info(status)
                        if (status === 'complete' && result.regeocode) {
                            address = result.regeocode.formattedAddress;
                            //console.info(address)
                            // alert("打卡签到位置：\n" + address + "\n坐标：" + lnglat);
                            document.getElementById("position").innerHTML = "位置：" + address;
                            //$('#address').val(address);//点击地名称
                            //$('#longitude').val(lnglat.lng);//经纬度
                            //$('#latitude').val(lnglat.lat);
                        }
                    });
    
                });
            }
    
        </script>
    </body>

# 完整代码 #

<!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://cache.amap.com/lbs/static/main1119.css" />
        <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=你的key&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder"></script>
        <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
        <style>
            html,
            body,
            #container {
                height: 100%;
                width: 100%;
            }
    
            .amap-icon img,
            .amap-marker-content img {
                width: 25px;
                height: 34px;
            }
    
            .marker {
                position: absolute;
                top: -22px;
                color: #fff;
                padding: 4px 10px;
                box-shadow: 1px 1px 1px rgba(10, 10, 10, .2);
                white-space: nowrap;
                font-size: 12px;
                background-color: #25A5F7;
                border-radius: 3px;
            }
    
            #myPageTop {
                top: 20px;
                right: 100px;
            }
    
            button {
                width: 174px;
            }
        </style>
    </head>
    
    <body>
        <div id="container"></div>
        <div id="myPageTop">
            <table>
                <tr>
                    <td>
                        <label>tips：点击地图标记打卡位置</label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input id="tipinput" placeholder="输入关键字搜索位置" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <button id="addMarker" onclick="addMarker()">保存标记地点</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button id="clearMarker" onclick="clearMarker()">删除标记地点</button>
                    </td>
                </tr>
            </table>
    
        </div>
        <script type="text/javascript">
            //地图加载
            var map = new AMap.Map("container", {
                resizeEnable: true
            });
            //输入提示
            var autoOptions = {
                input: "tipinput"
            };
            var auto = new AMap.Autocomplete(autoOptions);
            var placeSearch = new AMap.PlaceSearch({
                map: map
            });  //构造地点查询类
            AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
            function select(e) {
                placeSearch.setCity(e.poi.adcode);
                placeSearch.search(e.poi.name);  //关键字查询查询
            }
    
            var lnglat, address;
            var geocoder, marker;
    
            // 地图点击时，获取点击地经纬度
            map.on('click', function (e) {
                console.info(e)
                lnglat = e.lnglat;
                regeoCode();
            })
    
    
            function addMarker() {
                if (!lnglat || !address) {
                    alert("请标记打卡地点")
                } else {
                    console.info(address)
                    console.info(lnglat)
                }
            }
    
            function clearMarker() {
                if (lnglat || address) {
                    map.remove([marker]);
                    lnglat = null;
                    address = null;
                }
            }
    
    
    
            function regeoCode() {
                if (!geocoder) {
                    geocoder = new AMap.Geocoder();
                }
    
                geocoder.getAddress(lnglat, function (status, result) {
                    if (status === 'complete' && result.regeocode) {
                        address = result.regeocode.formattedAddress;
                        // alert("打卡签到位置：\n" + address + "\n坐标：" + lnglat);
                        document.getElementById("position").innerHTML = "标记位置：" + address;
                        //$('#address').val(address);//点击地名称
                        //$('#longitude').val(lnglat.lng);//经纬度
                        //$('#latitude').val(lnglat.lat);
                    }
                });
    
    
                // 自定义点标记内容
                var markerContent = document.createElement("div");
    
                // 点标记中的图标
                var markerImg = document.createElement("img");
                markerImg.className = "markerlnglat";
                markerImg.src = "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png";
                markerContent.appendChild(markerImg);
    
                // 点标记中的文本
                var markerSpan = document.createElement("span");
                markerSpan.className = 'marker';
                markerSpan.setAttribute("id", "position");
                markerSpan.innerHTML = "位置";
                markerContent.appendChild(markerSpan);
    
    
                if (!marker) {
                    marker = new AMap.Marker({ content: markerContent, draggable: true });
                    map.add(marker);
                }
                marker.setPosition(lnglat);//设置标记的位置
    
                marker.setMap(map);//在地图上显示一个标记
    
                marker.on('dragging', function (marker) {
                    // console.info(marker)
                    lnglat = marker.lnglat;
                    geocoder.getAddress(lnglat, function (status, result) {
                        //console.info(status)
                        if (status === 'complete' && result.regeocode) {
                            address = result.regeocode.formattedAddress;
                            //console.info(address)
                            // alert("打卡签到位置：\n" + address + "\n坐标：" + lnglat);
                            document.getElementById("position").innerHTML = "位置：" + address;
                            //$('#address').val(address);//点击地名称
                            //$('#longitude').val(lnglat.lng);//经纬度
                            //$('#latitude').val(lnglat.lat);
                        }
                    });
    
                });
            }
    
        </script>
    </body>
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9jaGVuZ2dhb3dlaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200203161344524.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9jaGVuZ2dhb3dlaS5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9jaGVuZ2dhb3dlaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200203211702263.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9jaGVuZ2dhb3dlaS5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70