高德地图的简单使用：点击标记获取经纬度和详细地址-Toy模板网

这篇具有很好参考价值的文章主要介绍了高德地图的简单使用：点击标记获取经纬度和详细地址。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

准备工作

1. 先进入高德开发平台注册登录 高德地图点击获取坐标,笔记,javascript,前端,开发语言
2.进入地图 js Api 按照步骤申请key
3 使用npm安装依赖包 npm i @amap/amap-jsapi-loader --save
4. 高德api 都有说明下面看下我实现的功能和代码

弹窗地图

1. 初始化地图加载地图将自动定位到您所在城市并显示，点击地图实现了打点获取经纬度和详情地址。
高德地图点击获取坐标,笔记,javascript,前端,开发语言
2.输入提示

使用了输入提示插件–在地图 js api 里服务模块里。
3.弹窗组件的全部代码文章来源地址https://www.toymoban.com/news/detail-522667.html

<template>
  <div class="app-container">
    <el-dialog
      title="打点"
      :append-to-body="true"
      :visible.sync="isShow"
      width="940px"
      top="15px"
      :close-on-click-modal="false"
      :before-close="beforeClose"
      :class="{textAlign:'center'}"
    >
      <div class="flex-ar mb15">
        <span>经度： {
   {
    form.lng }}</span><span> 纬度 {
   {
    form.lat }}</span><span> 地址 {
   {
    form.address }}</span>
      </div>
      <div id="container">

      </div>
      <div class="flex-bt" style="width: 400px;position: absolute;top:125px;left: 50px">
        <el-select v-model="address" clearable placeholder="请输入关键词" style="width: 400px;"
                   :remote-method="remoteMethod"
                   filterable
                   remote
                   @change="currentSelect"
                   class="one-text"
                   :loading="loading"
        >