标签：baidu Vue dataInfo -- 位置 地图 添加 com 百度
运用百度地图，添加位置信息
样式效果--完成实现：
一、在百度地图申请一个属于自己的秘钥
https://jingyan.baidu.com/article/363872eccda8286e4aa16f4e.html 获取百度地图秘钥 //如果找不到百度地图api 也可以直接访问 https://lbsyun.baidu.com/ 打开后进入下方---添加自己的秘钥
二、引入百度js在 /index.html引入
<!--百度api-->
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=m6yzyjfTCOdDDh2w8aTgdAaY8bVbolW2"></script>
三、完成地图显示的各项配置
对地图的编辑--下面的所有代码、获取坐标……可以参考https://lbsyun.baidu.com/jsdemo3.0.htm#js3_2 --》进入该网可以对地图显示的一个配置1、参考网页：
2、代码实现 --代码中参考为项目中代码--在Dialog组件中实现的
2-1 : 声明一个放置显示信息的位置(包括要显示的选择的位置、选择位置的经纬度、和百度地图的可供选择的框) 
<!-- 设置起始位置弹出框 -->
<!-- @opened是Dialog 打开动画结束时的回调 否则报ck错-->
<!-- :close-on-click-modal="false" 只能点叉号关闭dialog -->
<el-dialog
title="起始地址"
:visible.sync="Startdialog"
width="80%"
heignt="80%"
@opened="iniOpenBaiDuMap(ruleForm)"
:close-on-click-modal="false"
>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<el-row>
<el-col :span="8">
<el-form-item label="起始位置" prop="RName">
<el-input
v-model="ruleForm.StartAddress"
placeholder="线路起始位置"
:disabled="true"
></el-input></el-form-item
></el-col>
<el-col :span="8">
<el-form-item label="经度" prop="RName">
<el-input
v-model="ruleForm.StartLongitude"
placeholder="线路起始地址经度"
:disabled="true"
></el-input></el-form-item
></el-col>
<el-col :span="8">
<el-form-item label="纬度" prop="RName">
<el-input
v-model="ruleForm.StartLatitude"
placeholder="线路起始地址纬度"
:disabled="true"
></el-input></el-form-item
></el-col>
<el-col
><!--获取开始地址容器 这里放置地图-->
<div id="getStartLatAndLng" class="baiduContner"></div>
</el-col>
</el-row>
</el-form>
</el-dialog>
2-2 vue-methods中实现地图的创建-值返填显示
//#region 百度地图配置
//1、起始位置添加按钮触发diaLog
StartAddressAdd() {
this.Startdialog = true;
},
//1、终点位置添加按钮触发diaLog
EndAddressAdd() {
this.Enddialog = true;
},
// 2、Dialog 打开动画结束时的回调
iniOpenBaiDuMap(editModel) {
//editModel是返回的数据，1或2是用来区分当前是编写的起点的还是终点位置
if (this.Startdialog) {
this.showBaiDuMap(editModel, 1);
}
if (this.Enddialog) {
this.showBaiDuMap(editModel, 2);
}
},
//3、https://jingyan.baidu.com/article/363872eccda8286e4aa16f4e.html 获取百度地图秘钥
//如果找不到百度地图api 也可以直接访问 https://lbsyun.baidu.com/ 然后添加自己的秘钥
//4、引入百度js在 /index.html引入
//5、对地图的编辑--下面的所有代码、获取坐标……可以参考https://lbsyun.baidu.com/jsdemo3.0.htm#js3_2
//6、开始显示地图图片那个
showBaiDuMap(dataInfo, i) {
//获取地图经度纬度
//如果i是2表示当前是做的是终点的事情
var id = "getStartLatAndLng"; //获取放设置起点的地图位置在哪
if (i == 2) {
var id = "getEndLatAndLng"; //获取放设置起点的地图位置在哪
}
//使用容器 初始化地图
var map = new BMap.Map(id);
//给初始地址和地图比例大小设置 --默认下面的值在北京
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
//设置鼠标滚动缩放百度地图
map.enableScrollWheelZoom(true);
//地址解析,即Geocoder类，是根据一个地址得到对应的经纬度point。注：地址需要详细到街道，例如“北京市海淀区中关村南大街”。
var geocoder = new BMap.Geocoder();
//点击地图事件回调方法
map.addEventListener("click", function (e) {
if (i == 1) {
//要设置的是起点
dataInfo.StartLongitude = e.point.lng; //起点经度
dataInfo.StartLatitude = e.point.lng; //起点纬度
}
if (i == 2) {
//要设置的是终点
dataInfo.EndLongitude = e.point.lng; //终点经度
dataInfo.EndLatitude = e.point.lng; //终点纬度
}
//获取中文的详细地址
geocoder.getLocation(e.point, function (rs) {
var addComp = rs.addressComponents;
var address =
addComp.province +
addComp.city +
addComp.district +
addComp.street +
addComp.streetNumber;
if (i == 1) {
dataInfo.StartAddress = address;
}
if (i == 2) {
dataInfo.EndAddress = address;
}
});
});
},
//#endregion
2-3 完成实现效果样式--
标签：baidu,Vue,dataInfo,--,位置,地图,添加,com,百度 来源： https://www.cnblogs.com/ZhuMeng-Chao/p/16321604.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。