微信小程序map作为子组件wx.createMapContext失效

`uni.createMapContext` 是uni-app框架提供的一个方法，用于创建一个地图上下文（MapContext）对象。这个对象可以控制地图组件的一些行为，如设置地图的中心点、缩放级别、显示模式等。手绘地图通常指的是在地图上绘制特定的形状或者标记，而坐标点位则是指地图上具体的经纬度位置。 要使用`uni.createMapContext`制作手绘地图及坐标点位，你可以按照以下步骤进行： 1. 在页面的`.vue`文件中引入地图组件，并设置地图的基本属性。 2. 在`methods`中调用`uni.createMapContext`创建MapContext实例。 3. 使用MapContext实例的方法，如`addPolyline`、`addMarker`、`addCircle`等来添加路径、标记或圆形覆盖物。 4. 如果需要手绘功能，可以使用`draw`系列的方法，如`drawPolyline`、`drawRectangle`等来允许用户在地图上绘制自定义形状。 示例代码大致如下： ```javascript <template> <view> <map id="map" longitude="113.324520" latitude="23.099994" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 300px;"></map> </view> </template> <script> export default { data() { return { // 地图组件的控制按钮配置 controls: [{ id: 1, iconPath: '/static/location.png', position: { left: 0, top: 300 - 50, width: 50, height: 50 }, clickable: true }], // 标记点数据 markers: [{ iconPath: '/static/marker.png', id: 0, latitude: 23.099994, longitude: 113.324520, width: 50, height: 50 }], // 路径数据 polyline: [{ points: [{ longitude: 113.324520, latitude: 23.099994 }], color: "#FF0000DD", width: 2, dottedLine: true }] } }, methods: { // 控制按钮点击事件 controltap(e) { console.log('control被点击', e); }, // 标记点点击事件 markertap(e) { console.log('marker被点击', e); }, // 地区改变事件 regionchange(e) { console.log('regionchange', e); } } } </script> ``` 在上述代码中，我们创建了一个地图组件，并通过`markers`和`polyline`数组定义了标记点和路径。用户可以通过与这些组件的交互来实现基本的手绘地图功能。