在google地图的坐标更新之后,在触发更新事件之后,虽然坐标有被更新,但是显示新的坐标必须要手东刷新页面或者将画面移除区域再移动回来
想请教一下问题出现的地点以及如何改正。
尝试过将绘制·google的map部分填入,不过貌似没有什么结果?抑或是单纯我的操作有误或者地方不对。
部分代码如下:
<!-- 更新button设定-->
<button class="btn_tool btn_area_search" @click="onClickThisAreaSearchButton()">{{ $t('maps.updateStationInfo') }}</button>
async loadGoogle () {
await this.$googleMaps.load().then(async google => {
await this.$store.dispatch('stations/fetchGoogle', google);
const query = this.$route.query;
const zoomLevel = query['zoom'] ? parseInt(query['zoom'], 10) : ZOOM_LEVEL;
const isMapBounds = (query[SW_LAT] && query[SW_LNG] && query[NE_LAT] && query[NE_LNG]);
let defaultLocation = this.providerLocation;
if (isMapBounds) {
defaultLocation = await this.getBoundsCenter(query[SW_LAT], query[SW_LNG], query[NE_LAT], query[NE_LNG]);
await this.setBoundsSearchQuery();
}
this.initializeMap(document.querySelector('#googleMap'), defaultLocation, zoomLevel);
await this.getUserPosition(false);
if (isMapBounds) {
this.setIdleEvent();
} else {
this.afterMounted().finally(() => {
this.setIdleEvent();
});
}
});
},
setIdleEvent () {
this.google.maps.event.addListener(this.map, 'idle', () => {
this.defaultSearching();
});
},
initializeMap (target, location, zoomLevel) {
this.map = new this.google.maps.Map(target, {
center: location,
zoom: zoomLevel,
mapTypeControl: false,
streetViewControl: false,
styles: this.mapStyles
});
},
async getBounds () {
const swLatLng = this.map.getBounds().getSouthWest();
const neLatLng = this.map.getBounds().getNorthEast();
this.swLat = swLatLng.lat();
this.swLng = swLatLng.lng();
this.neLat = neLatLng.lat();
this.neLng = neLatLng.lng();
},
async getBoundsCenter (swLat, swLng, neLat, neLng) {
if (isNaN(parseFloat(swLat)) || isNaN(parseFloat(swLng)) || isNaN(parseFloat(neLat)) || isNaN(parseFloat(neLng))) {
return;
}
const swLatLng = new this.google.maps.LatLng(parseFloat(swLat), parseFloat(swLng));
const neLatLng = new this.google.maps.LatLng(parseFloat(neLat), parseFloat(neLng));
this.bounds = new this.google.maps.LatLngBounds(swLatLng, neLatLng);
const latlng = this.bounds.getCenter();
return { lat: latlng.lat(), lng: latlng.lng() };
},
async setMapCenter (latlng, zoomLevel = ZOOM_LEVEL) {
await this.map.setCenter(latlng);
await this.map.setZoom(zoomLevel);
},
/* ---------------------------- [marker] ------------------------------ */
async createMarker () {
if (!this.stations.length) {
return;
}
_.forEach(Object.keys(this.markerData), id => {
const isShowingStation = _.some(this.stations, station => {
return station.id.toString() === id.toString();
});
let markerData = this.markerData[id];
if (markerData && !isShowingStation) {
markerData.setMap(null);
}
});
// 问题似乎跟这里的设定有关系?
this.markers = _.map(this.stations, station => {
const stationId = station.id.toString();
const isShowingMarker = !(_.isEmpty(this.markerData) || _.isEmpty(this.markerData[stationId]) || _.isEmpty(this.markerData[stationId].map));
if (isShowingMarker) {
return this.markerData[stationId];
}
//问题到这里结束?
const icon = this.markerType(station);
let marker = new this.google.maps.Marker({
icon: icon,
position: this.getStationMarkerPosition(station),
map: this.map
});
// marker event
marker.addListener('click', event => {
const selectedStation = _.find(this.stations, stationData => {
return stationData.id === station.id;
});
station.is_favorite = selectedStation.is_favorite;
this.openDetail(station);
if (this.$mq !== 'sm') {
this.onClickMarkerToChangeTab(stationId);
}
this.changedSelectedMarker(station);
this.map.setCenter(marker.getPosition());
});
this.$set(this.markerData, stationId, marker);
return marker;
});
/* this.createMarkerCluster(); */
},
其他地方的设定看似没有什么问题
如果有需要添加其他的部分请吩咐,还请指教帮助,非常感谢
你好,我是有问必答小助手,非常抱歉,本次您提出的有问必答问题,技术专家团超时未为您做出解答
本次提问扣除的有问必答次数,已经为您补发到账户,我们后续会持续优化,扩大我们的服务范围,为您带来更好地服务。