|
|
@@ -1,429 +1,258 @@
|
|
|
<template>
|
|
|
- <view class="container">
|
|
|
- <!-- 地图容器 - 必须设置明确高度 -->
|
|
|
- <view id="mapContainer" class="map-container"></view>
|
|
|
-
|
|
|
- <!-- 坐标显示区域 -->
|
|
|
- <view class="coordinates" v-if="showCoordinates">
|
|
|
- <view class="coordinate-item">
|
|
|
- <text class="coordinate-label">经度：</text>
|
|
|
- <text class="coordinate-value">{{ longitude }}</text>
|
|
|
- </view>
|
|
|
- <view class="coordinate-item">
|
|
|
- <text class="coordinate-label">纬度：</text>
|
|
|
- <text class="coordinate-value">{{ latitude }}</text>
|
|
|
- </view>
|
|
|
- <view class="coordinate-item">
|
|
|
- <text class="coordinate-label">地址：</text>
|
|
|
- <text class="coordinate-value">{{ address }}</text>
|
|
|
- </view>
|
|
|
+ <view class="map_container">
|
|
|
+ <!-- #ifdef APP-PLUS || H5 -->
|
|
|
+ <view
|
|
|
+ id="MapContainer"
|
|
|
+ :props="randerProps"
|
|
|
+ :change:props="handlePropsChange"
|
|
|
+ style="width: 100%;height: 300px;position: relative;"
|
|
|
+ ></view>
|
|
|
+ <!-- #endif -->
|
|
|
</view>
|
|
|
- </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
- props: {
|
|
|
- initialPosition: {
|
|
|
- type: Object,
|
|
|
- default: () => ({
|
|
|
- lnglat: null,
|
|
|
- address: ''
|
|
|
- })
|
|
|
+ name: "TdMap",
|
|
|
+ props: {
|
|
|
+ initialPosition: {
|
|
|
+ type: Object,
|
|
|
+ default: () => ({ lng: 112.55, lat: 37.87 }),
|
|
|
+ validator: (val) => {
|
|
|
+ if (!val) return true;
|
|
|
+ return typeof val.lng === 'number' && typeof val.lat === 'number' && !isNaN(val.lng) && !isNaN(val.lat);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ allowSelection: { type: Boolean, default: false },
|
|
|
+ showCoordinates: { type: Boolean, default: false },
|
|
|
+ mapKey: { type: [String, Number], default: 0 }
|
|
|
},
|
|
|
- allowSelection: {
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
+ computed: {
|
|
|
+ randerProps() {
|
|
|
+ console.log('【子组件】接收的经纬度', this.initialPosition)
|
|
|
+ return {
|
|
|
+ initialPosition: { ...this.initialPosition },
|
|
|
+ allowSelection: this.allowSelection,
|
|
|
+ showCoordinates: this.showCoordinates
|
|
|
+ };
|
|
|
+ }
|
|
|
},
|
|
|
- showCoordinates: {
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- map: null,
|
|
|
- geocoder: null,
|
|
|
- tk: '92c4ddd919f4e41a30e765680e3a29b7', // 替换为实际密钥
|
|
|
- longitude: '未选择',
|
|
|
- latitude: '未选择',
|
|
|
- address: '未获取',
|
|
|
- markers: [],
|
|
|
- labels: [], // 存储文本标签
|
|
|
- mapInitialized: false
|
|
|
- };
|
|
|
- },
|
|
|
- watch: {
|
|
|
- initialPosition: {
|
|
|
- immediate: true,
|
|
|
- handler(newVal) {
|
|
|
- if (this.mapInitialized && newVal && this.isValidPosition(newVal)) {
|
|
|
- this.processPosition(newVal);
|
|
|
+ methods: {
|
|
|
+ handlePropsChange(newProps) {
|
|
|
+ return { ...newProps };
|
|
|
}
|
|
|
- }
|
|
|
},
|
|
|
- allowSelection(newVal) {
|
|
|
- if (this.map) {
|
|
|
- if (newVal) {
|
|
|
- this.enableMapSelection();
|
|
|
- } else {
|
|
|
- this.disableMapSelection();
|
|
|
+ watch: {
|
|
|
+ initialPosition: {
|
|
|
+ deep: true,
|
|
|
+ handler() {
|
|
|
+ this.handlePropsChange(this.randerProps);
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.$nextTick(() => {
|
|
|
- setTimeout(() => {
|
|
|
- this.initMap();
|
|
|
- }, 500);
|
|
|
- });
|
|
|
- // 确保在H5环境下运行
|
|
|
- // #ifdef H5
|
|
|
-
|
|
|
- // #endif
|
|
|
-
|
|
|
- // 非H5环境提示
|
|
|
- // #ifndef H5
|
|
|
- console.warn("天地图组件仅支持H5环境");
|
|
|
- uni.showToast({
|
|
|
- title: '地图功能仅在H5环境可用',
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- // #endif
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 验证坐标是否有效
|
|
|
- isValidPosition(position) {
|
|
|
- const lng = position.lng ||
|
|
|
- (position.lnglat && (position.lnglat.lng || position.lnglat.longitude));
|
|
|
- const lat = position.lat ||
|
|
|
- (position.lnglat && (position.lnglat.lat || position.lnglat.latitude));
|
|
|
-
|
|
|
- return lng && lat && !isNaN(parseFloat(lng)) && !isNaN(parseFloat(lat));
|
|
|
- },
|
|
|
-
|
|
|
- // 处理坐标数据
|
|
|
- processPosition(position) {
|
|
|
- const lng = position.lng ||
|
|
|
- (position.lnglat && (position.lnglat.lng || position.lnglat.longitude));
|
|
|
- const lat = position.lat ||
|
|
|
- (position.lnglat && (position.lnglat.lat || position.lnglat.latitude));
|
|
|
-
|
|
|
- if (lng && lat) {
|
|
|
- this.setMapCenter(parseFloat(lng), parseFloat(lat));
|
|
|
- this.reverseGeocode(parseFloat(lng), parseFloat(lat));
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- initMap() {
|
|
|
- if (typeof T === 'undefined') {
|
|
|
- this.loadTiandituAPI().then(() => {
|
|
|
- this.createMap();
|
|
|
- }).catch(err => {
|
|
|
- console.error("天地图加载失败:", err);
|
|
|
- uni.showToast({
|
|
|
- title: '地图加载失败',
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- });
|
|
|
- } else {
|
|
|
- this.createMap();
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- loadTiandituAPI() {
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- if (window.T) return resolve();
|
|
|
+};
|
|
|
+</script>
|
|
|
|
|
|
- const script = document.createElement('script');
|
|
|
- script.src = `https://api.tianditu.gov.cn/api?v=4.0&tk=${this.tk}`;
|
|
|
- script.onload = resolve;
|
|
|
- script.onerror = () => reject(new Error('天地图脚本加载失败'));
|
|
|
- document.head.appendChild(script);
|
|
|
- });
|
|
|
+<script module="randerJSMap" lang="renderjs">
|
|
|
+export default {
|
|
|
+ props: ['props'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ mapRef: null,
|
|
|
+ markerRef: null,
|
|
|
+ mapLoaded: false
|
|
|
+ };
|
|
|
},
|
|
|
-
|
|
|
- createMap() {
|
|
|
- try {
|
|
|
- // 创建地图实例
|
|
|
- this.map = new T.Map('mapContainer');
|
|
|
-
|
|
|
- // 设置默认中心点（太原）
|
|
|
- let centerLng = 112.55;
|
|
|
- let centerLat = 37.87;
|
|
|
- let name = ''
|
|
|
-
|
|
|
- // 使用初始坐标（如果存在）
|
|
|
- if (this.initialPosition && this.isValidPosition(this.initialPosition)) {
|
|
|
- const lng = this.initialPosition.lng ||
|
|
|
- (this.initialPosition.lnglat && (this.initialPosition.lnglat.lng || this.initialPosition.lnglat
|
|
|
- .longitude));
|
|
|
- const lat = this.initialPosition.lat ||
|
|
|
- (this.initialPosition.lnglat && (this.initialPosition.lnglat.lat || this.initialPosition.lnglat.latitude));
|
|
|
-
|
|
|
- centerLng = parseFloat(lng);
|
|
|
- centerLat = parseFloat(lat);
|
|
|
- name = this.initialPosition.address
|
|
|
- // 更新坐标显示
|
|
|
- this.longitude = centerLng.toFixed(6);
|
|
|
- this.latitude = centerLat.toFixed(6);
|
|
|
- this.address = name;
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * 修复APP端容器获取失败问题
|
|
|
+ */
|
|
|
+ getMapContainer() {
|
|
|
+ return new Promise((resolve) => {
|
|
|
+ // 方案1：常规document获取
|
|
|
+ let container = document.getElementById('MapContainer');
|
|
|
+ if (container) {
|
|
|
+ console.log('【容器获取】成功', container);
|
|
|
+ return resolve(container);
|
|
|
+ }
|
|
|
+ // 方案2：APP端兜底（RenderJS专用）
|
|
|
+ uni.createSelectorQuery().in(this.$ownerInstance)
|
|
|
+ .select('#MapContainer')
|
|
|
+ .boundingClientRect((rect) => {
|
|
|
+ if (rect) {
|
|
|
+ container = document.querySelector('#MapContainer');
|
|
|
+ resolve(container);
|
|
|
+ } else {
|
|
|
+ resolve(null);
|
|
|
+ }
|
|
|
+ }).exec();
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 初始化地图（适配4.0：移除VectorLayer，简化逻辑）
|
|
|
+ */
|
|
|
+ async initMap() {
|
|
|
+ try {
|
|
|
+ const T = window.T;
|
|
|
+ if (!T) throw new Error('天地图API未加载');
|
|
|
+
|
|
|
+ // 1. 安全获取容器（解决APP端容器为空）
|
|
|
+ const container = await this.getMapContainer();
|
|
|
+ if (!container) throw new Error('地图容器为空');
|
|
|
+
|
|
|
+ // 2. 创建地图实例（4.0简化版）
|
|
|
+ this.mapRef = new T.Map(container);
|
|
|
+ if (!this.mapRef) throw new Error('地图实例创建失败');
|
|
|
+
|
|
|
+ // 3. 解析坐标（确认有值）
|
|
|
+ const { lng = 112.55, lat = 37.87 } = this.props?.initialPosition || {};
|
|
|
+ const targetLngLat = new T.LngLat(Number(lng), Number(lat));
|
|
|
+ console.log('【初始化】最终坐标', targetLngLat.getLng(), targetLngLat.getLat());
|
|
|
+
|
|
|
+ // 4. 初始化地图视图（放大缩放级别，确保点在视野中心）
|
|
|
+ this.mapRef.centerAndZoom(targetLngLat, 16); // 放大到16级，点更显眼
|
|
|
+ this.mapRef.setMapType(T.TMAP_NORMAL_MAP);
|
|
|
+ this.mapRef.enableScrollWheelZoom(true); // 开启滚轮缩放，方便查看
|
|
|
+
|
|
|
+ // 5. 强制渲染地图
|
|
|
+ this.mapRef.render();
|
|
|
+ this.mapLoaded = true;
|
|
|
+
|
|
|
+ // 6. 延长延迟创建点（给4.0地图加载留足时间，APP端需500ms+）
|
|
|
+ setTimeout(() => {
|
|
|
+ this.createMarker(targetLngLat);
|
|
|
+ }, 800);
|
|
|
+
|
|
|
+ } catch (error) {
|
|
|
+ console.error('【初始化失败】', error);
|
|
|
+ this.mapLoaded = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 创建点覆盖物（4.0适配：直接添加到地图，放大尺寸确保可见）
|
|
|
+ */
|
|
|
+ createMarker(lngLat) {
|
|
|
+ try {
|
|
|
+ const T = window.T;
|
|
|
+ if (!this.mapLoaded || !lngLat) {
|
|
|
+ console.error('【标点失败】前置条件不足', {
|
|
|
+ mapLoaded: this.mapLoaded,
|
|
|
+ lngLat: !!lngLat
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 移除旧点（4.0直接从地图移除）
|
|
|
+ if (this.markerRef) {
|
|
|
+ this.mapRef.removeOverlay(this.markerRef);
|
|
|
+ this.markerRef = null;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 创建点覆盖物（超大尺寸+高亮颜色，确保100%可见）
|
|
|
+ this.markerRef = new T.PointOverlay(lngLat, {
|
|
|
+ radius: 15, // 放大到15px，肉眼绝对可见
|
|
|
+ color: '#ff0000', // 红色（最显眼）
|
|
|
+ borderColor: '#ffffff',
|
|
|
+ borderWidth: 4,
|
|
|
+ zIndex: 99999 // 顶级层级，绝对不被覆盖
|
|
|
+ });
|
|
|
+
|
|
|
+ // 4.0适配：直接添加到地图实例（无需矢量图层）
|
|
|
+ this.mapRef.addOverlay(this.markerRef);
|
|
|
+ console.log('【标点】点覆盖物添加到地图成功', this.markerRef);
|
|
|
+
|
|
|
+ // 强制刷新地图
|
|
|
+ this.mapRef.render();
|
|
|
+
|
|
|
+ // 确保点在视野中心（双重保障）
|
|
|
+ this.mapRef.panTo(lngLat);
|
|
|
+
|
|
|
+ // 点击事件（验证点存在）
|
|
|
+ this.markerRef.addEventListener('click', () => {
|
|
|
+ const coord = {
|
|
|
+ lng: lngLat.getLng().toFixed(6),
|
|
|
+ lat: lngLat.getLat().toFixed(6)
|
|
|
+ };
|
|
|
+ uni.showToast({
|
|
|
+ title: `坐标：${coord.lng},${coord.lat}`,
|
|
|
+ icon: 'none',
|
|
|
+ duration: 3000
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ } catch (error) {
|
|
|
+ console.error('【标点异常】', error);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * props更新时同步点位置
|
|
|
+ */
|
|
|
+ handlePropsUpdate(newProps) {
|
|
|
+ console.log('【props更新】', newProps);
|
|
|
+ if (!this.mapLoaded || !newProps) return;
|
|
|
+
|
|
|
+ const { lng, lat } = newProps.initialPosition || {};
|
|
|
+ if (typeof lng !== 'number' || typeof lat !== 'number' || isNaN(lng) || isNaN(lat)) {
|
|
|
+ console.warn('无效坐标，使用默认值');
|
|
|
+ return this.createMarker(new window.T.LngLat(112.55, 37.87));
|
|
|
+ }
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ this.createMarker(new window.T.LngLat(lng, lat));
|
|
|
+ }, 500);
|
|
|
}
|
|
|
-
|
|
|
- // 设置地图中心和缩放级别
|
|
|
- this.map.centerAndZoom(new T.LngLat(centerLng, centerLat), 12);
|
|
|
-
|
|
|
- // 创建逆地理编码对象
|
|
|
- this.geocoder = new T.Geocoder();
|
|
|
-
|
|
|
- // 添加正确的地图图层（使用经纬度投影）
|
|
|
- const vecLayer = new T.TileLayer(
|
|
|
- `https://t{s}.tianditu.gov.cn/vec_c/wmts?tk=${this.tk}`, {
|
|
|
- subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
|
|
|
- }
|
|
|
- );
|
|
|
- const cvaLayer = new T.TileLayer(
|
|
|
- `https://t{s}.tianditu.gov.cn/cva_c/wmts?tk=${this.tk}`, {
|
|
|
- subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
|
|
|
- }
|
|
|
- );
|
|
|
-
|
|
|
- this.map.addLayer(vecLayer);
|
|
|
- this.map.addLayer(cvaLayer);
|
|
|
-
|
|
|
- // 添加缩放控件
|
|
|
- this.map.addControl(new T.Control.Zoom());
|
|
|
-
|
|
|
- // 启用选点功能
|
|
|
- if (this.allowSelection) this.enableMapSelection();
|
|
|
-
|
|
|
- // 添加初始标记
|
|
|
- if (this.initialPosition && this.isValidPosition(this.initialPosition)) {
|
|
|
- const lng = this.initialPosition.lng ||
|
|
|
- (this.initialPosition.lnglat && (this.initialPosition.lnglat.lng || this.initialPosition.lnglat
|
|
|
- .longitude));
|
|
|
- const lat = this.initialPosition.lat ||
|
|
|
- (this.initialPosition.lnglat && (this.initialPosition.lnglat.lat || this.initialPosition.lnglat.latitude));
|
|
|
-
|
|
|
- this.addMarker(parseFloat(lng), parseFloat(lat));
|
|
|
- this.reverseGeocode(parseFloat(lng), parseFloat(lat));
|
|
|
- }
|
|
|
-
|
|
|
- this.mapInitialized = true;
|
|
|
- } catch (e) {
|
|
|
- console.error('地图初始化错误:', e);
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 启用地图选点
|
|
|
- enableMapSelection() {
|
|
|
- this.map.on('click', this.handleMapClick);
|
|
|
- },
|
|
|
-
|
|
|
- // 禁用地图选点
|
|
|
- disableMapSelection() {
|
|
|
- this.map.off('click', this.handleMapClick);
|
|
|
},
|
|
|
-
|
|
|
- // 设置地图中心点并更新坐标显示
|
|
|
- setMapCenter(lng, lat) {
|
|
|
- this.longitude = parseFloat(lng).toFixed(6);
|
|
|
- this.latitude = parseFloat(lat).toFixed(6);
|
|
|
-
|
|
|
- // 清除现有标记
|
|
|
- this.clearMarkers();
|
|
|
-
|
|
|
- // 添加新标记
|
|
|
- this.addMarker(lng, lat);
|
|
|
-
|
|
|
- // 移动地图视图
|
|
|
- this.map.panTo(new T.LngLat(lng, lat));
|
|
|
-
|
|
|
- // 通知父组件
|
|
|
- this.notifyParent();
|
|
|
- },
|
|
|
-
|
|
|
- // 逆地理编码
|
|
|
- reverseGeocode(lng, lat) {
|
|
|
- if (!this.geocoder) return;
|
|
|
-
|
|
|
- this.address = '正在查询...';
|
|
|
- const point = new T.LngLat(lng, lat);
|
|
|
-
|
|
|
- this.geocoder.getLocation(point, (result) => {
|
|
|
- if (result.getStatus() === 0) {
|
|
|
- this.address = result.getAddress();
|
|
|
+ mounted() {
|
|
|
+ console.log('【RenderJS】开始加载API');
|
|
|
+ if (window.T) {
|
|
|
+ // 延迟初始化（确保容器+props就绪）
|
|
|
+ setTimeout(() => this.initMap(), 500);
|
|
|
} else {
|
|
|
- this.address = '查询失败';
|
|
|
+ // 加载天地图4.0 API（替换为自己的TK）
|
|
|
+ const script = document.createElement('script');
|
|
|
+ script.src = 'https://api.tianditu.gov.cn/api?v=4.0&tk=92c4ddd919f4e41a30e765680e3a29b7';
|
|
|
+ script.async = false; // 同步加载，避免时序问题
|
|
|
+ script.onload = () => {
|
|
|
+ console.log('【API加载】完成');
|
|
|
+ setTimeout(() => this.initMap(), 800); // 延长延迟
|
|
|
+ };
|
|
|
+ script.onerror = () => console.error('API加载失败，请检查TK密钥是否有效');
|
|
|
+ document.body.appendChild(script);
|
|
|
}
|
|
|
-
|
|
|
- // 更新标签内容
|
|
|
- this.updateLabelContent();
|
|
|
- this.notifyParent();
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 地图点击事件
|
|
|
- handleMapClick(e) {
|
|
|
- if (!this.allowSelection) return;
|
|
|
- this.setMapCenter(e.lnglat.lng, e.lnglat.lat);
|
|
|
- this.reverseGeocode(e.lnglat.lng, e.lnglat.lat);
|
|
|
- },
|
|
|
-
|
|
|
- // 通知父组件位置信息
|
|
|
- notifyParent() {
|
|
|
- this.$emit('update-location', {
|
|
|
- longitude: this.longitude,
|
|
|
- latitude: this.latitude,
|
|
|
- address: this.address
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 添加标记
|
|
|
- addMarker(lng, lat) {
|
|
|
- try {
|
|
|
- const point = new T.LngLat(lng, lat);
|
|
|
-
|
|
|
- // 添加标记
|
|
|
- const marker = new T.Marker(point);
|
|
|
- this.map.addOverLay(marker);
|
|
|
- this.markers.push(marker);
|
|
|
-
|
|
|
- // 添加文本标签
|
|
|
- this.addLabel(lng, lat, this.address);
|
|
|
-
|
|
|
- console.log('标记添加成功:', lng, lat);
|
|
|
- } catch (error) {
|
|
|
- console.error('添加标记失败:', error);
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 添加文本标签
|
|
|
- addLabel(lng, lat, content) {
|
|
|
- try {
|
|
|
- const point = new T.LngLat(lng, lat);
|
|
|
-
|
|
|
- // 创建文本标签
|
|
|
- const label = new T.Label({
|
|
|
- text: content || '未知地址',
|
|
|
- position: point,
|
|
|
- offset: new T.Point(-50, -40) // 调整标签位置使其在标记点上方
|
|
|
- });
|
|
|
-
|
|
|
- // 设置标签样式
|
|
|
- // label.setStyle({
|
|
|
- // color: '#333',
|
|
|
- // backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
|
|
- // border: '1px solid #ddd',
|
|
|
- // borderRadius: '4px',
|
|
|
- // padding: '5px 10px',
|
|
|
- // fontSize: '12px',
|
|
|
- // fontWeight: 'bold',
|
|
|
- // boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
|
|
|
- // maxWidth: '150px',
|
|
|
- // textAlign: 'center'
|
|
|
- // });
|
|
|
-
|
|
|
- this.map.addOverLay(label);
|
|
|
- // this.labels.push(label);
|
|
|
- } catch (error) {
|
|
|
- console.error('添加标签失败:', error);
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 更新标签内容
|
|
|
- updateLabelContent() {
|
|
|
- if (this.labels.length > 0) {
|
|
|
- const lastLabel = this.labels[this.labels.length - 1];
|
|
|
- lastLabel.setText(this.address);
|
|
|
- }
|
|
|
},
|
|
|
-
|
|
|
- // 清除标记和标签
|
|
|
- clearMarkers() {
|
|
|
- // 清除标记
|
|
|
- this.markers.forEach(marker => {
|
|
|
- try {
|
|
|
- this.map.removeOverLay(marker);
|
|
|
- } catch (error) {
|
|
|
- console.error('移除标记失败:', error);
|
|
|
- }
|
|
|
- });
|
|
|
- this.markers = [];
|
|
|
-
|
|
|
- // 清除标签
|
|
|
- this.labels.forEach(label => {
|
|
|
- try {
|
|
|
- this.map.removeOverLay(label);
|
|
|
- } catch (error) {
|
|
|
- console.error('移除标签失败:', error);
|
|
|
+ watch: {
|
|
|
+ props: {
|
|
|
+ deep: true,
|
|
|
+ handler(newProps) {
|
|
|
+ this.handlePropsUpdate(newProps);
|
|
|
+ }
|
|
|
}
|
|
|
- });
|
|
|
- this.labels = [];
|
|
|
}
|
|
|
- }
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
-/* 容器样式 */
|
|
|
-.container {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- position: relative; /* 为绝对定位的信息窗口提供参考 */
|
|
|
- z-index: 0;
|
|
|
-}
|
|
|
-
|
|
|
-/* 地图容器 - 关键：必须设置高度 */
|
|
|
-.map-container {
|
|
|
- width: 100%;
|
|
|
- height: 300rpx;
|
|
|
- /* 使用rpx单位适应不同屏幕 */
|
|
|
- border: 1px solid #eee;
|
|
|
- background-color: #f8f8f8;
|
|
|
-}
|
|
|
-
|
|
|
-/* 坐标显示区域 */
|
|
|
-.coordinates {
|
|
|
- margin-top: 20rpx;
|
|
|
- padding: 20rpx;
|
|
|
- background-color: #f8f9fa;
|
|
|
- border-radius: 8rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.coordinate-item {
|
|
|
- display: flex;
|
|
|
- margin: 15rpx 0;
|
|
|
- padding: 15rpx 0;
|
|
|
- border-bottom: 1rpx dashed #dee2e6;
|
|
|
-}
|
|
|
-
|
|
|
-.coordinate-item:last-child {
|
|
|
- border-bottom: none;
|
|
|
-}
|
|
|
-
|
|
|
-.coordinate-label {
|
|
|
- font-weight: bold;
|
|
|
- color: #495057;
|
|
|
- min-width: 120rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.coordinate-value {
|
|
|
- color: #333333;
|
|
|
- font-weight: 500;
|
|
|
- flex: 1;
|
|
|
-}
|
|
|
-
|
|
|
-/* 天地图控件层级调整 */
|
|
|
-::v-deep .tdt-bottom {
|
|
|
- z-index: 0;
|
|
|
-}
|
|
|
-::v-deep .tdt-top {
|
|
|
- z-index: 0;
|
|
|
+<style scoped lang="scss">
|
|
|
+.map_container {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 300px;
|
|
|
+ z-index: 1;
|
|
|
+ overflow: visible;
|
|
|
+ /* 浅灰色背景，对比红色点更显眼 */
|
|
|
+ background: #f0f0f0;
|
|
|
}
|
|
|
-::v-deep .tdt-bottom, .tdt-control {
|
|
|
- z-index: 0;
|
|
|
+#MapContainer {
|
|
|
+ position: relative;
|
|
|
+ z-index: 9999 !important; // 顶级层级，避免任何遮挡
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ /* 移除可能的内边距/边框遮挡 */
|
|
|
+ padding: 0 !important;
|
|
|
+ margin: 0 !important;
|
|
|
+ border: none !important;
|
|
|
}
|
|
|
</style>
|
