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进行初始化
这样我们的功能才算真正的实现!!!
以上技巧感觉对你有帮助,可以点个赞和在看
