uniapp地图怎么做

在uniapp中实现地图功能

使用uniapp开发地图功能主要依赖uni-app官方提供的map组件或第三方地图插件。以下介绍两种常用方法：

方法一：使用uniapp原生map组件

uniapp内置了map组件，支持在微信小程序、H5、App等多端运行。基本用法如下：

<template>
  <view>
    <map 
      id="myMap"
      :latitude="latitude"
      :longitude="longitude"
      :markers="markers"
      style="width: 100%; height: 300px;">
    </map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      latitude: 39.908823,
      longitude: 116.397470,
      markers: [{
        id: 1,
        latitude: 39.908823,
        longitude: 116.397470,
        title: '天安门'
      }]
    }
  }
}
</script>

方法二：使用第三方地图插件

如果需要更复杂的功能，可以使用高德地图或百度地图的uniapp插件：

1. 安装高德地图插件：

   npm install @dcloudio/uni-amap --save

2. 在manifest.json中配置：

   

   "app-plus": {
   "modules": {
    "Maps": {}
   },
   "distribute": {
    "sdkConfigs": {
      "maps": {
        "amap": {
          "appkey_ios": "你的高德key",
          "appkey_android": "你的高德key"
        }
      }
    }
   }
   }

3. 使用示例：

   
   <template>
   <view>
    <amap 
      :longitude="longitude"
      :latitude="latitude"
      :markers="markers"
      @markertap="onMarkerTap">
    </amap>
   </view>
   </template>

import amap from '@dcloudio/uni-amap' export default { components: { amap }, data() { return { longitude: 116.397470, latitude: 39.908823, markers: [{ id: 1, longitude: 116.397470, latitude: 39.908823, title: '位置标记' }] } }, methods: { onMarkerTap(e) { console.log('标记点击', e) } } } ```

常见功能实现

添加自定义标记

在markers数组中添加更多标记点即可：

markers: [
  {
    id: 1,
    latitude: 39.908823,
    longitude: 116.397470,
    iconPath: '/static/marker.png',
    width: 30,
    height: 30,
    title: '标记1'
  },
  {
    id: 2,
    latitude: 39.918823,
    longitude: 116.407470,
    iconPath: '/static/marker2.png',
    width: 30,
    height: 30,
    title: '标记2'
  }
]

地图控件配置

通过controls属性添加控件：

controls: [{
  id: 1,
  iconPath: '/static/location.png',
  position: {
    left: 10,
    top: 10,
    width: 20,
    height: 20
  },
  clickable: true
}]

获取当前位置

使用uni.getLocation获取用户当前位置：

uni.getLocation({
  type: 'gcj02',
  success: res => {
    this.latitude = res.latitude
    this.longitude = res.longitude
  }
})

注意事项

1. 不同平台需要申请对应的地图密钥
2. 真机调试时需确认定位权限已开启
3. 微信小程序需在manifest.json中配置permission字段
4. 高德地图插件在App端表现最佳，H5端需额外配置