weiweidong1993
commented
3 years ago 用编辑器模拟的话 点击右下角的定位 无反应 发布到测试环境 点击定位居然定位到了武汉市市中心(本人当前位置应该是武汉洪山区这一片区)
不知道是组件的问题还是因为代码原因
<!-- 地图样本 -->
<template>
<div>
<baidu-map class="map" :center="center" :zoom="zoom" @ready="handler">
<!-- 多边形 -->
<bm-polygon
v-if="geoObj.shape=='polygon'"
:path="polygonPath"
stroke-color="blue"
fillColor="#6c90e0"
:fillOpacity="0.5"
:stroke-opacity="0.2"
:stroke-weight="1"
:editing="false"
/>
<!-- 圆形 -->
<bm-circle
v-if="geoObj.shape=='circle'"
:center="circlePath.center"
:radius="circlePath.radius"
stroke-color="blue"
fillColor="#6c90e0"
:fillOpacity="0.5"
:stroke-opacity="0.2"
:stroke-weight="1"
:editing="false"
></bm-circle>
<!-- 显示的签到的点 -->
<bm-marker
v-if="geoObj.shape=='signLocation'"
:position="center"
:dragging="true"
animation="BMAP_ANIMATION_BOUNCE"
>
<bm-label
content="签到地址"
:labelStyle="{color: 'red', fontSize : '12px'}"
:offset="{width: -35, height: 30}"
/>
</bm-marker>
<!-- 地图类型 -->
<bm-map-type
:map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
anchor="BMAP_ANCHOR_TOP_LEFT"
></bm-map-type>
<!-- 比例尺 -->
<bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
<!-- 缩放 -->
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
<!-- 城市名称 -->
<!-- <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list> -->
<!-- 定位仪 -->
<!-- <bm-geolocation
anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
:showAddressBar="false"
@locationSuccess="getCurlocation"
:locationIcon="{url: require('@/svg/map/Location.svg'), size: {width: 18, height: 18}}"
></bm-geolocation>-->
<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
<!-- 版权信息 -->
<bm-copyright
anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
:copyright="[{id: 1, content: 'Copyright Message', bounds: {ne: {lng: 110, lat: 40},
sw:{lng: 0, lat: 0}}}, {id: 2, content: '<a>@2020|MBS-人事健康·行政工具</a>'}]"
></bm-copyright>
</baidu-map>
</div>
</template>
<script>
export default {
data() {
return {
//地图相关参数
center: { lng: 0, lat: 0 },
zoom: 15,
points: [],
//多边形参数
polygonPath: [
{ lng: 116.412732, lat: 39.911707 },
{ lng: 116.39455, lat: 39.910932 },
{ lng: 116.403461, lat: 39.921336 }
],
//圆形参数
circlePath: {
center: {
lng: 116.404,
lat: 39.915
},
radius: 500
},
//地理围栏 对象 数据
geoObj: {
geofenceName: "地理围栏模板",
locationList: [
{
lat: 22.66074962975348,
lng: 114.03253984433832
},
{
lat: 22.656591317312387,
lng: 114.0554995535058
},
{
lat: 22.660591220159368,
lng: 114.03215360624017
}
],
//形状 默认 多边形 圆形 矩形 (暂且不知 先不干了)
shape: "circle",
ploygon: "ploygon"
}
};
},
created() {
this.geoObj = this.$route.params;
this.replaceOBJKeyOfList(this.geoObj.locationList);
},
mounted() {},
methods: {
//自动定位成功后的
getCurlocation() {
debugger;
// 获取浏览器当前定位
if (!this.BMap) return false;
let BMap = this.BMap;
let geolocation = new BMap.Geolocation();
let _this = this;
geolocation.getCurrentPosition(function(r) {
_this.map_center = r.point;
_this.shop_lng = r.point.lng;
_this.shop_lat = r.point.lat;
});
},
replaceOBJKeyOfList(list) {
//转换key
var keyMap = { geofenceLongitude: "lng", geofenceLatitude: "lat" };
if (list && list.length > 0) {
this.geoObj.locationList = list.map(obj => {
var newObjs = Object.keys(obj).reduce((newData, key) => {
let newKey = keyMap[key] || key;
newData[newKey] = obj[key];
console.log(newData);
return newData;
}, {});
return newObjs;
});
}
},
handler({ BMap, map }) {
// BaiduMap 组件容器本身是一个空的块级元素，如果容器不定义高度，百度地图将渲染在一个高度为 0 不可见的容器内。
// 没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的。当center 属性为合法地名字符串时例外，
// 因为百度地图会根据地名自动调整 zoom 的值。
// 由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此，
// 请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层
// console.log(BMap, map);
// this.center.lng = 114.1;
// this.center.lat = 22.6;
if (this.geoObj.shape == "polygon") {
this.polygonPath = this.geoObj.locationList;
}
if (this.geoObj.shape == "circle") {
this.circlePath.center = this.geoObj.locationList[0];
this.circlePath.radius = this.geoObj.radius;
}
console.log("此时图形为:", this.geoObj.shape);
console.log("此时圆形的参数", this.circlePath);
console.log("此时多边形的参数", this.polygonPath);
if (this.geoObj.shape == "signLocation") {
this.center = {
lng: this.geoObj.jingdu,
lat: this.geoObj.weidu
};
// this.zoom = 15;
} else {
this.center = this.geoObj.locationList[0];
this.zoom = 13;
}
console.log("此时点的中心为:", this.center);
}
}
};
</script>
<style lang="less" scoped>
//@import "../../common/css/index";
@import "../../common/css/color";
.map {
width: 100%;
height: 100vh;
}
.map-location {
.notice {
padding: 10px;
text-align: center;
}
}
</style>代码如上
[BUG 反馈] vue Baidu Map 定位到当前位置 错误
浏览器版本号
使用的是小程序(We码) 华为内部封装的一个架构 移动端
Vue 版本号
2.9.6
组件库版本号
^0.21.22
现象描述
完整异常信息
在线示例 / 仓库 URL
无
复现用例
预期输出
实际输出