Vue中使用百度地图(获取用户当前位置并)实现标注点以及详情 |
您所在的位置：网站首页 › 百度地图数据存储位置 › Vue中使用百度地图(获取用户当前位置并)实现标注点以及详情 |
Vue中使用百度地图(获取用户当前位置并)实现标注点以及详情
|
首先肯定是去百度地图API里面申请一个密钥(ak) http://lbsyun.baidu.com/index.php?title=首页滑到最下面
我写了3个不同的 第一种
html css #allmap { width: 100%; height: 100%; }js data:{ nowLat: 0, nowLng: 0, point: {}, marker: {}, map: {} } methods:{ //根据动态获取到的经纬度显示当前位置 useBaiduMap: function () { var _this = this; // 百度地图API功能 let Lat = this.nowLat; let Lng = this.nowLng; // 百度地图API功能*/ _this.map = new BMap.Map("allmap"); if(this.position.lng !==null && this.position.lat !==null){ _this.point = new BMap.Point(this.position.lng, this.position.lat); }else{ _this.point = new BMap.Point(Lng, Lat); } _this.map.centerAndZoom(_this.point, 15); _this.map.enableScrollWheelZoom(true); //启用滚轮放大缩小，默认禁用 _this.map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用 _this.marker = new BMap.Marker(_this.point); //创建marker对象 _this.map.addOverlay(_this.marker); // 将标注添加到地图中 _this.marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 //用户确认重新选择位置坐标 _this.map.addEventListener("click", function (e) { _this.disp_confirm(e); }); //获取手机设备高度 var deviceHeight = window.innerHeight; document.getElementById('allmap').style.height = deviceHeight + 'px'; }, //重新选择位置信息 disp_confirm(e) { var _this = this; this.point = new BMap.Point(e.point.lng, e.point.lat); _this.point = new BMap.Point(e.point.lng, e.point.lat); this.nowLng = e.point.lng this.nowLat = e.point.lat this.position.lng = e.point.lng this.position.lat = e.point.lat _this.marker.setPosition(_this.point);//设置覆盖物位置 _this.getAddressName(); }, // 获取具体位置信息名称 getAddressName() { var _this = this; var gc = new BMap.Geocoder(); gc.getLocation(_this.point, function (rs) { var addComp = rs.addressComponents; // 百度地图API功能 _this.marker = new BMap.Marker(_this.point); // 创建标注 _this.remove_overlay(); _this.map.addOverlay(_this.marker); // 将标注添加到地图中 _this.map.centerAndZoom(_this.point, 15); var opts = { width: 200, // 信息窗口宽度 height: 100, // 信息窗口高度 title: "", // 信息窗口标题 enableMessage: true,//设置允许信息窗发送短息 message: "" } var infoWindow = new BMap.InfoWindow("地址：" + addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber, opts); // 创建信息窗口对象 _this.marker.addEventListener("click", function (e) { e.domEvent.cancelBubble=true;//点击标注时显示当前位置信息 阻止地图的点击事件 _this.map.openInfoWindow(infoWindow, _this.point); //开启信息窗口 }); console.log(addComp) }); }, //清除覆盖物 remove_overlay(){ this.map.clearOverlays(); } }, }, activated:{ var _this = this; var geolocation = new BMap.Geolocation(); //弹出地理授权 获取当前的经纬度 geolocation.getCurrentPosition(function (r) { if (this.getStatus() == BMAP_STATUS_SUCCESS) { _this.nowLat = r.point.lat; _this.nowLng = r.point.lng; _this.useBaiduMap(); } else { alert("baidu return failed"); } }, //获取失败时候的回调 function (r) { alert('请允许百度地图获取当前位置信息'); return { //设置高精度 enableHighAccuracy: true }; } ); }第二种 是地图上生成特定的标注点，点击之后显示详情
首先在index.html里面引入我们的ak 然后代码 html css #allmap { width: 100%; height:100vh; }js export default { mounted() { var map = new BMap.Map("allmap"); var point = new BMap.Point(121.769473,31.111712); map.centerAndZoom(point,16); var marker = new BMap.Marker(point); var mapPoints = [ {x:31.111712,y:121.769473,title:"A",con:"我是A",branch:"gogoing"}, {x:31.112565,y:121.771581,title:"B",con:"我是B",branch:"loving"}, {x:31.115246,y:121.768545,title:"B",con:"我是B",branch:"cool"}, ]; var i = 0; map.addOverlay(marker); map.enableScrollWheelZoom(true); // 函数 创建多个标注 function markerFun (points,label,infoWindows) { var markers = new BMap.Marker(points); map.addOverlay(markers); markers.setLabel(label); markers.addEventListener("click",function (event) { map.openInfoWindow(infoWindows,points);//参数：窗口、点 根据点击的点出现对应的窗口 }); } for (;i |
注册认证好后
然后就会有一个密钥了，OK开始写demo
先询问是否授权，然后同意之后才会显示地图，红点可以点击显示该地方的详情，也可以移动，经纬度也会随之改变
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |