uniapp map 画圆

### 实现 UniApp 中的地图圆形标记功能 在 UniApp 的 `map` 组件中，虽然原生支持的标记点（marker）无法直接绘制圆形，但可以通过自定义覆盖物（overlay）来实现这一目标。具体来说，可以利用 `<cover-view>` 和 `<cover-image>` 结合 CSS 样式或者通过调用腾讯地图 Web API 来完成更复杂的操作。 以下是基于 UniApp 提供的组件以及腾讯地图 API 的两种解决方案： --- #### 方法一：使用 Cover View 自定义圆形标记 通过 `<cover-view>` 或者 `<cover-image>` 创建一个圆形区域，并将其放置到地图上的指定位置。 ```html <template> <view> <!-- 地图组件 --> <map id="myMap" :latitude="latitude" :longitude="longitude" :scale="scale"></map> <!-- 覆盖层用于显示圆形 --> <cover-view class="circle-marker" :style="{ top: markerTop + 'px', left: markerLeft + 'px' }"> <cover-view class="inner-circle"></cover-view> </cover-view> </view> </template> <script> export default { data() { return { latitude: 39.9087, longitude: 116.3975, scale: 16, markerTop: 0, // 动态计算的位置 markerLeft: 0 // 动态计算的位置 }; }, mounted() { this.calculateMarkerPosition(); }, methods: { calculateMarkerPosition() { const query = uni.createSelectorQuery().in(this); query.select('#myMap').boundingClientRect(rect => { if (rect) { // 假设我们希望圆形位于地图中心 this.markerTop = rect.height / 2; this.markerLeft = rect.width / 2; } }).exec(); } } }; </script> <style> .circle-marker { position: absolute; width: 50px; height: 50px; } .inner-circle { background-color: red; border-radius: 50%; width: 100%; height: 100%; } </style> ``` 上述代码展示了如何通过动态调整样式属性创建一个固定大小的圆形标记[^1]。 --- #### 方法二：借助腾讯地图 JavaScript SDK 添加圆形覆盖物 如果需要更加灵活的操作，可以直接引入腾讯地图 JS SDK 并在其基础上扩展功能。以下是一个简单的示例： ```javascript // 初始化地图并添加圆形覆盖物 const mapObj = new TMap.Map('container', { center: { lat: 39.9087, lng: 116.3975 }, // 圆心坐标 zoom: 16 }); // 定义圆形参数 const circleOptions = { center: { lat: 39.9087, lng: 116.3975 }, // 圆心 radius: 1000, // 半径单位米 fillColor: '#FFCC00AA', strokeColor: '#FFCC00' }; // 将圆形添加至地图 const circleOverlay = new TMap.Circle(circleOptions); mapObj.addOverlays([circleOverlay]); ``` 此方法适用于需要更高精度控制的情况，但由于 UniApp 默认不提供对腾讯地图 JS SDK 的内置支持，因此可能需要额外配置 WebView 或其他方式加载脚本。 --- #### 注意事项 - 如果仅需简单展示而不涉及复杂交互，则推荐 **方法一**； - 若项目中有更多高级需求（如点击事件绑定或多边形处理），则建议采用 **方法二** 并结合腾讯地图官方文档进一步开发。 --- ###