原来百度地图api还可以这么玩

1.原因

系统创建的账号需要在大数据平台的地图上展示位置,所以在创建账号的时候添加一个获取经纬度,一开始是跳转页面获取完经纬度,再自行粘贴,这个时候,害怕一些工作人员填写出错,所以在弹框中内嵌了一个地图。

2.制作流程

2.1 获取ak

首先需要我们打开百度地图的控制台

创建一个应用,获取我们的访问ak

2.2引入ak

在我们的public文件夹下的index.html中引入我们的ak

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=ak值"></script>

2.3创建initmap组件

2.4注册initmap组件并使用

我们的reloadinit方式,是用来获取initmap组件传入的信息

我会将initmap组件中的经纬度传给父组件接受

2.5地图制作

首先我先给一个盒子,用于地图展示

再写一个输入框,用于搜索

<template>  <div class="mapBox">    <div id="container"></div>    <div id='result' class="flex">      <el-input v-model="value" size="small" class="wid200"></el-input>      <el-button size="small" type="purple" style="margin-left: 10px;" @click="theLocation()">查询</el-button>    </div>  </div></template>

定义一下输入框绑定的value

data() {    return {      value: null    }  }

写一下css样式

因为我们这边使用了相对绝对定位,所以我们将输入框的图层提高一下,使用了z-index

最后我们写一下百度地图的基本代码

在click点击的时候我们使用this.$emit(‘父组件的方法’, 参数值);将地图获取的经纬度传入过去

这样我们的这个小功能就实现了

但是这时候,还是有一个小bug

那就是我们现在的操作到哪一步了,再次打开还是哪一步,这时候我们应该考虑到要清楚根据弹窗的show来控制我们初始化

话不多说,我们在弹框父组件中给initmap组件传一个值,名为showmap

我们在子组件中获取一下,然后使用watch监听showmap进行初始化

这样我们的功能才算真正的实现!!!

以上技巧感觉对你有帮助,可以点个赞和在看