高德地图根据名称搜索坐标，坐标点呈现列表展示

高德地图API与地点搜索

最新推荐文章于 2023-08-30 14:04:52 发布

原创

最新推荐文章于 2023-08-30 14:04:52 发布 · 3.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#js #vue.js #街景地图

本文介绍如何使用高德地图API实现地点搜索功能，包括设置地图中心、缩放级别，以及通过输入关键字进行地点搜索并获取经纬度信息。代码示例展示了如何利用AMap.Autocomplete和AMap.PlaceSearch插件实现这一功能。

效果展示

在这里插入图片描述

话不多说，直接上代码

<!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/main.css"/>
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=你自己从高德地图上申请的Key值"></script>
    <style type="text/css">
        body {
    
    
            font-size: 12px;
        }
        #tip {
    
    
            background-color: #ddf;
            color: #333;
            border: 1px solid silver;
            box-shadow: 3px 4px 3px 0px silver;
            position: absolute;
            top