uni-app x map

在uni-app中使用地图组件（map）可以方便地展示和交互地图数据。下面是一个简单的示例，展示如何在uni-app项目中集成和使用地图组件。

首先，确保你的uni-app项目已经创建并运行。然后，按照以下步骤操作：

1. 在页面中添加地图组件：

   在你的页面文件（例如pages/index/index.vue）中，添加地图组件。map组件是微信小程序提供的原生组件，在uni-app中可以直接使用。

   <template>
     <view class="container">
       <map
         id="map"
         longitude="{{longitude}}"
         latitude="{{latitude}}"
         scale="14"
         markers="{{markers}}"
         style="width: 100%; height: 300px;"
       ></map>
     </view>
   </template>
   
   <script>
   export default {
     data() {
       return {
         longitude: 116.404, // 默认经度
         latitude: 39.915,  // 默认纬度
         markers: [
           {
             id: 1,
             latitude: 39.915,
             longitude: 116.404,
             title: '北京',
             iconPath: '/static/marker.png', // 自定义图标路径
             width: 50,
             height: 50
           }
         ]
       };
     }
   };
   </script>
   
   <style>
   .container {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
   }
   </style>
   

2. 自定义图标：

   在/static目录下放置一个自定义的地图标记图标（例如marker.png）。确保图标的路径正确。

3. 运行项目：

   保存所有文件，然后在uni-app开发工具中运行项目。你应该能够看到地图上显示了一个标记，标记的位置是北京，且使用了自定义图标。

4. 更多功能：

   map组件还支持许多其他功能，如控制缩放级别、添加多个标记、显示用户位置等。你可以参考uni-app官方文档获取更多关于map组件的详细信息和用法。

   例如，如果你想添加用户位置功能，可以使用wx.getLocation API获取用户当前位置，并更新longitude和latitude数据。

   wx.getLocation({
     type: 'gcj02', // 返回可以用于wx.openLocation的经纬度
     success: res => {
       this.longitude = res.longitude;
       this.latitude = res.latitude;
       // 更新markers数组中的位置信息
       this.markers[0].longitude = res.longitude;
       this.markers[0].latitude = res.latitude;
     }
   });
   

以上代码展示了如何在uni-app中使用地图组件，并自定义标记图标。根据需求，你可以进一步扩展功能。