uni-app 地图点亮功能

发布于 1周前 作者 nodeper 来自 Uni-App

uni-app 地图点亮功能

uniapp微信小程序能流畅运行即可,支持中国地图,以城市为单位,如果那个城市有人点亮,地图就标记显示。功能跟附件类似. wx:13637957471

图片

1 回复

针对uni-app中的地图点亮功能,可以通过集成地图组件并利用地图服务(如腾讯地图、高德地图等)的API来实现。以下是一个基于腾讯地图SDK的简要实现示例,展示了如何在地图上添加标记(即点亮功能)。

首先,确保你已经在项目中引入了腾讯地图SDK。这通常需要在manifest.json中配置相关依赖,并获取腾讯地图的API Key。

// manifest.json
{
  "mp-weixin": {
    "appid": "YOUR_APPID",
    "setting": {
      "urlCheck": false
    },
    "usingComponents": true,
    "permission": {
      "scope.userLocation": {
        "desc": "你的位置信息将用于小程序地图定位"
      }
    }
  },
  // 其他配置...
  "sdkConfigs": {
    "tencentMap": {
      "version": "latest",
      "key": "YOUR_TENCENT_MAP_KEY"
    }
  }
}

接下来,在页面的.vue文件中使用地图组件,并添加标记。

<template>
  <view>
    <map
      id="map"
      longitude="{{longitude}}"
      latitude="{{latitude}}"
      scale="14"
      markers="{{markers}}"
      show-location
      style="width: 100%; height: 500rpx;"
    ></map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      latitude: 39.908823, // 默认纬度
      longitude: 116.397470, // 默认经度
      markers: [] // 标记数组
    };
  },
  onLoad() {
    // 模拟点亮功能,添加一个标记
    this.markers = [
      {
        id: 1,
        latitude: 39.908823,
        longitude: 116.397470,
        title: '点亮位置',
        iconPath: '/static/marker.png', // 自定义图标路径
        width: 50,
        height: 50
      }
    ];
  },
  methods: {
    // 你可以在这里添加更多方法,比如根据用户操作动态添加标记
    addMarker(lat, lng, title) {
      const newMarker = {
        id: this.markers.length + 1,
        latitude: lat,
        longitude: lng,
        title: title,
        iconPath: '/static/marker.png',
        width: 50,
        height: 50
      };
      this.markers.push(newMarker);
    }
  }
};
</script>

<style>
/* 样式可以根据需要调整 */
</style>

在这个示例中,我们使用了map组件,并通过markers属性添加了标记。你可以根据业务逻辑,在onLoad生命周期函数或其他方法中动态添加或更新标记,以实现地图点亮功能。注意,这里的图标路径/static/marker.png需要替换为你实际使用的图标路径。

此外,根据具体需求,你可能还需要处理用户位置更新、标记点击事件等,这些都可以通过腾讯地图SDK提供的API来实现。

回到顶部