vue项目中使用百度地图的方法
程序员文章站
2022-11-15 10:18:44
1.在百度地图申请密钥: 将
...
1.在百度地图申请密钥: 将
<script type="text/javascript" src="=密钥" ></script>
中的 密钥替换成你申请的,在 vue项目的index.html引用。
2. 在build 文件下下的 webpack.base.conf.js贴入代码
externals: { "bmap": "bmap" },
3. map.vue代码(demo可以直接使用,demo使用了vue-clipboard2插件,请自行安装)
<template> <div> <el-row > <el-col :offset="2" :span="8"> <el-input :id="suggestid" v-model="address_detail" :clearable='clearable' placeholder="请输入店铺地址,获取店铺坐标" > </el-input> </el-col> <el-col :span="2"> <el-button id="position" @click="search" type="primary">定位</el-button> </el-col> <el-col :span="12" > <el-tag type="success" v-clipboard:copy="userlocation.lng" v-clipboard:success="oncopy" v-clipboard:error="onerror" >经度 {{userlocation.lng}}</el-tag> <el-tag type="success" v-clipboard:copy="userlocation.lat" v-clipboard:success="oncopy" v-clipboard:error="onerror">纬度 {{userlocation.lat}}</el-tag> <el-tag type="success" ><<<<点击左侧按钮复制经纬度信息</el-tag> </el-col> </el-row> <el-row> <el-col :offset="2" :span="18"> <div id="map_canvas" class="allmap"></div> </el-col> </el-row> </div> </template> <script> export default { data() { return { address_detail: "", //详细地址 userlocation: { lng: "", lat: "" }, clearable: true, suggestid: "suggestid", map : {}, mk: {} }; }, created () { }, methods: { drawmap() { this.map = new bmap.map("map_canvas"); // 创建地图实例 this.map.addcontrol(new bmap.navigationcontrol()); // 启用放大缩小 尺 this.map.enablescrollwheelzoom(); this.getlocation();//获取当前坐标, 测试时获取定位不准。 var point = new bmap.point(this.userlocation.lng, this.userlocation.lat); // 创建点坐标 this.map.centerandzoom(point, 13); // 初始化地图,设置中心点坐标和地图级别 var marker = new bmap.marker(point); // 创建标注 this.map.addoverlay(marker); // 将标注添加到地图中 var ac = new bmap.autocomplete({ //建立一个自动完成的对象 input: "suggestid", location: this.map }); var myvalue; ac.addeventlistener("onconfirm", (e)=> { //鼠标点击下拉列表后的事件 var _value = e.item.value; myvalue =_value.province +_value.city +_value.district +_value.street +_value.business; this.address_detail = myvalue; this.setplace(); }); }, getmarker (point) { this.mk = new bmap.marker(point); this.mk.addeventlistener("dragend", this.showinfo); this.mk.enabledragging(); //可拖拽 this.getaddress(point); this.map.addoverlay(this.mk);//把点添加到地图上 this.map.panto(point); }, getlocation () { //获取当前位置 var geolocation = new bmap.geolocation(); geolocation.getcurrentposition((r) =>{ if(geolocation.getstatus() == bmap_status_success){ this.getmarker(r.point); this.userlocation = r.point; }else { alert('failed'+this.getstatus()); } }); }, //绑定marker的拖拽事件 showinfo(e){ var gc = new bmap.geocoder(); gc.getlocation(e.point, (rs)=>{ var addcomp = rs.addresscomponents; var address = addcomp.province + addcomp.city + addcomp.district + addcomp.street + addcomp.streetnumber;//获取地址 //画图 ---》显示地址信息 var label = new bmap.label(address,{offset:new bmap.size(20,-10)}); this.map.removeoverlay(this.mk.getlabel());//删除之前的label this.mk.setlabel(label); this.address_detail = address; this.userlocation = e.point; }); }, //获取地址信息,设置地址label getaddress(point){ var gc = new bmap.geocoder(); gc.getlocation(point, (rs)=>{ var addcomp = rs.addresscomponents; var address = addcomp.province + addcomp.city + addcomp.district + addcomp.street + addcomp.streetnumber;//获取地址 //画图 ---》显示地址信息 var label = new bmap.label(address,{offset:new bmap.size(20,-10)}); this.map.removeoverlay(this.mk.getlabel());//删除之前的label this.address_detail = address; this.mk.setlabel(label); }); }, setplace() { this.map.clearoverlays(); //清除地图上所有覆盖物 var th = this function myfun() { th.userlocation = local.getresults().getpoi(0).point; //获取第一个智能搜索的结果 th.map.centerandzoom(th.userlocation, 18); th.getmarker(th.userlocation); } var local = new bmap.localsearch(this.map, { onsearchcomplete: myfun //智能搜索 }); local.search(this.address_detail); }, search () { var localsearch = new bmap.localsearch(this.map); localsearch.enableautoviewport(); //允许自动调节窗体大小 this.searchbyinputname(localsearch); }, searchbyinputname(localsearch) { this.map.clearoverlays(); //清空原来的标注 var th = this; var keyword = this.address_detail; localsearch.setsearchcompletecallback(function(searchresult) { var poi = searchresult.getpoi(0); th.userlocation = poi.point; th.map.centerandzoom(poi.point, 13); th.getmarker(th.userlocation); }); localsearch.search(keyword); }, oncopy () { this.$message('内容已复制到剪贴板!'); }, onerror () { this.$message('内容复制失败,请重试!'); } }, mounted() { this.$nexttick(function() { this.drawmap(); }); } }; </script> <style scoped> .allmap { width: 100%; height: 400px; font-family: "微软雅黑"; border: 1px solid green; } .el-tag { cursor: pointer; } </style>
总结
以上所述是小编给大家介绍的vue项目中使用百度地图的方法,希望对大家有所帮助
上一篇: 酷爱嘴喷粪吐口水