如何为微信小程序添加地理位置标记和地点搜索功能

要为微信小程序添加地理位置标记和地点搜索功能，可以使用微信小程序的地图组件和相关接口来实现。以下是一个示例代码，详细介绍了如何添加地理位置标记和进行地点搜索。

1. 在小程序的页面中添加地图组件

首先，在小程序的页面中添加一个地图组件，可以通过 map 组件来实现。在页面的 wxml 文件中添加以下代码：

<view class="page">
  <map id="map" bindregionchange="regionChange" bindmarkertap="markerTap"></map>
</view>

这样就在页面中添加了一个地图组件，并指定了两个事件处理函数 regionChange 和 markerTap。

1. 初始化地图和地理位置标记

在页面的 js 文件中，通过 wx.createMapContext 创建一个地图上下文，然后通过 mapCtx.moveToLocation 方法将地图初始化到当前位置。同时，可以使用 mapCtx.addMarker 方法添加一个地理位置标记。

// 初始化地图和地理位置标记
Page({
  data: {
    markers: []
  },
  onLoad: function() {
    // 创建地图上下文
    this.mapCtx = wx.createMapContext('map')

    // 获取当前位置
    wx.getLocation({
      type: 'gcj02',
      success: res => {
        // 将地图移动到当前位置
        this.mapCtx.moveToLocation({
          longitude: res.longitude,
          latitude: res.latitude
        })

        // 添加地理位置标记
        this.addMarker(res.longitude, res.latitude, '当前位置')
      }
    })
  },
  addMarker: function(longitude, latitude, title) {
    // 添加地理位置标记
    let markers = this.data.markers
    markers.push({
      id: markers.length,
      longitude: longitude,
      latitude: latitude,
      title: title,
      iconPath: '/images/location.png',
      width: 24,
      height: 24
    })
    this.setData({ markers: markers })
  },
  regionChange: function(e) {
    // 地图视野变化时触发该事件
    console.log('regionChange', e)
  },
  markerTap: function(e) {
    // 点击地理位置标记时触发该事件
    console.log('markerTap', e)
  }
})

1. 地点搜索功能

要实现地点搜索功能，可以使用微信小程序的 wx.request 请求接口，调用第三方地图服务进行地点搜索。以下是一个例子：

// 地点搜索功能
Page({
  data: {
    markers: [],
    keyword: ''
  },
  onLoad: function() {
    // ...
  },
  search: function() {
    // 请求地点搜索接口
    wx.request({
      url: 'https://api.map.baidu.com/place/v2/search',
      data: {
        query: this.data.keyword,
        region: '全国',
        output: 'json',
        ak: '你的百度地图API密钥'
      },
      success: res => {
        if (res.data.status === 0) {
          let markers = []

          // 添加地理位置标记
          res.data.results.forEach((item, index) => {
            markers.push({
              id: index,
              longitude: item.location.lng,
              latitude: item.location.lat,
              title: item.name,
              iconPath: '/images/location.png',
              width: 24,
              height: 24
            })
          })

          // 更新地图和标记
          this.setData({ markers: markers })
        } else {
          console.log('地点搜索失败', res.data.message)
        }
      },
      fail: err => {
        console.log('请求失败', err)
      }
    })
  },
  onKeywordChange: function(e) {
    // 输入搜索关键词时触发该事件
    this.setData({ keyword: e.detail.value })
  },
  onSearchTap: function() {
    // 点击搜索按钮时触发该事件
    this.search()
  }
})

在页面的 wxml 文件中添加搜索框和搜索按钮：

<view>
  <input class="search-input" placeholder="输入关键词" bindinput="onKeywordChange" />
  <button bindtap="onSearchTap">搜索</button>
</view>

通过输入关键词并点击搜索按钮，即可触发地点搜索功能，将搜索结果显示在地图上。

以上就是为微信小程序添加地理位置标记和地点搜索功能的详细代码案例。