这篇文章主要讲解了“vue怎么整合百度地图显示指定地点信息”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue怎么整合百度地图显示指定地点信息”吧!
先看看效果图
npm i --save vue-baidu-map
import BaiduMap from "vue-baidu-map" Vue.use(BaiduMap,{ ak: '你的密钥(百度地图开放API官网可免费申请)' })
export function MP(ak) { return new Promise(function (resolve, reject) { window.init = function () { resolve(BMap) } var script = document.createElement("script"); script.type = "text/javascript"; script.src = "http://api.map.baidu.com/api?v=2.0&ak="+"你的密钥"+"&callback=init"; script.onerror = reject; document.head.appendChild(script); }) }
在需要用到地图的文件引入该工具
import { MP } from "@/utils/map.js";
1、创建一个容器展示地图,给容器指定一个id,根据页面的具体需求指定容器的宽和高
<div class="map"> <div id="container" ref="allmap"></div> </div>
2、在data中定义需要用到的数据
data() { return { dialogMap: false, mapPointName: "", mapGetshow: true } }
3、定义全局的map地图对象和geocoder地理编码对象
var map; let geoc = null;
4、创建一个定位地点的方法,添加要展示的地点的名称,此处也可动态指定
mapNameChange() { let that = this, point, marker = null; let local = new BMap.LocalSearch(map, { renderOptions: { map: map }, onSearchComplete: (res) => { if (local.getResults() != undefined) { map.clearOverlays(); //清除地图上所有覆盖物 if (local.getResults().getPoi(0)) { point = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果 map.centerAndZoom(point, 10); marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 marker.enableDragging(); // 可拖拽 geoc.getLocation(point, function (rs) { var addComp = rs.addressComponents; that.mapPointName = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber; }); } else { console.log("未搜索到结果") } } else { alert("未搜索到结果"); } }, }); local.search("岳阳楼"); //要展示的地点 },
5、在mounted函数中调用上述方法并绘制地图
mounted() { this.$nextTick(function () { var _this = this; MP(_this.ak).then((BMap) => { let that = this; this.dialogMap = !this.dialogMap; if (that.mapGetshow) { map = new BMap.Map("container"); //存放地图容器的id geoc = new BMap.Geocoder(); map.enableScrollWheelZoom(); } _this.mapNameChange() //调用定位地点的方法 }); }); }
感谢各位的阅读,以上就是“vue怎么整合百度地图显示指定地点信息”的内容了,经过本文的学习后,相信大家对vue怎么整合百度地图显示指定地点信息这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。