高德地图——地图渲染及关键字搜索POI功能vue2/web端

系守夕

已于 2022-08-21 02:45:19 修改

阅读量2.3k

点赞数 1

文章标签：前端 javascript html vue

于 2022-08-21 02:08:45 首次发布

本文链接：https://blog.youkuaiyun.com/m0_49926116/article/details/126446617

版权

本文介绍了如何在Vue2前端项目中使用高德地图，包括注册API key，引入地图，以及在普通页面和弹窗中实现地图渲染。重点讲述了地图不显示的常见原因和解决方案，以及在不同场景下初始化地图的注意事项。同时，针对高德地图搜索框样式问题，提供了全局CSS解决策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、注册key

👉https://lbs.amap.com/，注册账号登录之后

应用管理----我的应用----创建新应用
新建应用填写
添加key填写

二、引入高德地图

npm i @amap/amap-jsapi-loader --save

三、实现代码

本文将分为版本1和版本2进行编写
使用场景：
版本1：普通的页面
版本2：在弹窗或者页面嵌套
按需而取其中一个版本复制粘贴即可

template

版本1：

 <div>
     <div class="mapSearch">
         <el-input
          placeholder="请输入你要查找的关键词"
          v-model="userInput"
          id="tishikuang"
         ></el-input>
         <el-button type="primary" @click="biu">确定选址</el-button>
     </div>
     <div id="container"></div>
 </div>

版本2：
我碰到的一个不显示地图的原因：没把以上代码放在 footer slot 中

dialog 组件中的 footer slot 是实时渲染的，放在其中的 dom 元素才可以直接获取，这里说明一下不显示的原因是：
Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。
（。。T A T。。）

   <el-dialog
      :title="titleEdit"
      :visible.sync="openEdit"
      width="1200px"
      append-to-body
      center
    >
     <div slot="footer" class="dialog-footer">
        <div>
          <div class="mapSearch">
            <el-input
              placeholder="请输入你要查找的关键词"
              v-model="userInput"
              id="tishikuang"
            ></el-input>
            <el-button type="primary" @click="biu">确定选址</el-button>
          </div>
          <div id="container"></div>
        </div>
      </div>
    </el-dialog>

script

版本1：

import AMapLoader from '@amap/amap-jsapi-loader'
    window._AMapSecurityConfig = {
   
        securityJsCode: '安全密钥'//在这里填写你的安全密钥
    }
    export default {
   
        data() {
   
            return {
   
                map: null,
                autoOptions: {
   
                    input: 'tishikuang' //绑定的搜索关键字的input标签ID，用这个注册
                },
                auto: null,
                userInput: '', //绑定的搜索关键字的的内容
                placeSearch: null,
                searchHere: null

最低0.47元/天解锁文章