vue3.0项目引入高德地图

W_Venus

已于 2022-06-29 14:59:14 修改

阅读量7.1k

点赞数 3

分类专栏： vue3+高德地图文章标签： vue.js 前端

于 2022-04-21 11:44:11 首次发布

本文链接：https://blog.csdn.net/W_Venus/article/details/124316925

版权

记一次vue3.0项目引入高德地图，凑合看，勿喷

不喜勿喷，我也是第一次搞vue3 和高德地图，写的肯定不完美。觉得可以就点赞收藏哟
- 完结，撒花🎉

项目中有个功能是打开地图，搜索地点，获取经纬度

如图：
点击查找位置按钮，弹出地图弹窗，搜索地点，展示结果列表，点击某一条数据，关闭弹窗，返回经纬度
在这里插入图片描述

在这里插入图片描述

首先，找到高德地图文档，需要先申请一个key等，有三步，按文档操作即可，最后拿到一个key和密钥

高德地图官方文档

第二步，我使用了npm安装Loader

官方链接

第三步，我在项目里public文件夹下的index.html中写入

官方不推荐这种方式引入，因为我在开发阶段，暂时先这样写

<script type="text/javascript">
     window._AMapSecurityConfig = {
   
         securityJsCode: '',  // 这里写你第一步拿到的密钥
     }
 </script>

然后在map.vue中编辑
贴出完整代码吧

tip: 项目上线后发现地图无法使用，最终找到原因是在index.html中获取环境变量的方式不对，作出如下调整（同时记得要运维配置下nginx）

 <script type="text/javascript">
      // 在html中这样获取环境变量
      const env = '<%= VUE_APP_ENV %>'
      window._AMapSecurityConfig = {
   
        serviceHost: env === 'production' ? `https://xxxxxxx/_AMapService`: `https://xxxxxxxxxx/_AMapService`,
      };
</script>

<template>
    <div class="mask" v-show="show" @click="clickMask"></div>
        <div class="content" v-show="show">
            <div id="container"></div>
            <div class="box">
                <div class="top_box">
                    <div>选择位置</div>
                    <van-icon name="cross" size="16" @click="clickMask" />
                </div>
                 <div class="info">
                    <input id='tipinput' v-model="keyword" type="text" placeholder="搜索">
                </div>
            </div>
            <van-cell-group>
                <van-cell>
                    <div class="my_city">
                        <div class="my_city_label">我的位置</div>
                        <div>{
   {
   myCity}}</div>
                    </div>
                </van-cell>
                <van-cell v-for="item in areaList" :key="item" :title="item.name" :label="item.address" @click