小程序原生调用腾旭地图api_微信小程序调用腾讯地图-CSDN博客

本文链接：https://blog.csdn.net/rong_pei/article/details/147725013

小程序原生调用腾旭地图api，详细解释步骤及源代码。

一：申请腾讯地图账号

腾讯地图地址：腾讯位置服务 https://lbs.qq.com

1.常规的申请账号登录

注册登录就行

2.创建key

添加的key中‘APP ID’为小程序项目appid

3.配置额度

二：在微信公众平台，配置request路径

地址：微信公众号平台 https://mp.weixin.qq.com

1.添加request路径

https://apis.map.qq.com

三：编写代码

1、寻找appid

在项目创建的时候设置的id号，可以在这里修改，记得第二步的 ‘配置request路径’需要配置的appid为项目id

2、图片资源

可以自行寻找图片资源

3、编写map.js

记得放入你的腾讯地图key

Page({
  data: {
    latitude: 23.099994,
    longitude: 113.324520,
    scale: 14,
    markers: [],
    searchKeyword: '',
    destination: null,
    searchResults: [], // 存储搜索结果
    showResults: false, // 控制结果列表显示
    selectedMarkerId: null // 添加选中标记的ID
  },

  onLoad: function() {
    // 获取用户当前位置
    wx.getLocation({
      type: 'gcj02',
      success: (res) => {
        const latitude = res.latitude
        const longitude = res.longitude
        this.setData({
          latitude,
          longitude
        })
      },
      fail: () => {
        wx.showToast({
          title: '请开启位置权限',
          icon: 'none'
        })
      }
    })
  },

  onSearchInput: function(e) {
    this.setData({
      searchKeyword: e.detail.value,
      showResults: false // 输入时隐藏结果列表
    })
  },

  onSearch: function() {
    if (!this.data.searchKeyword) {
      wx.showToast({
        title: '请输入搜索关键词',
        icon: 'none'
      })
      return
    }

    // 使用微信小程序的地图搜索功能
    wx.request({
      url: 'https://apis.map.qq.com/ws/place/v1/search',
      data: {
        keyword: this.data.searchKeyword,
        boundary: `nearby(${this.data.latitude},${this.data.longitude},5000)`,
        key: '放入你的key',//我的腾讯key
        page_size: 10,
        page_index: 1,
        orderby: '_distance'
      },
      success: (res) => {
        if (res.data.status === 0) {
          const locations = res.data.data
          if (locations.length > 0) {
            // 转换搜索结果为标记点
            const markers = locations.map((item, index) => ({
              id: index + 1,
              latitude: item.location.lat,
              longitude: item.location.lng,
              title: item.title,
              iconPath: '/images/marker.png', // 默认图标
              width: 30,
              height: 30
            }))

            this.setData({
              searchResults: locations,
              markers: markers,
              showResults: true,
              selectedMarkerId: null, // 重置选中状态
              latitude: locations[0].location.lat,
              longitude: locations[0].location.lng,
              scale: 14
            })
          } else {
            wx.showToast({
              title: '未找到相关地点',
              icon: 'none'
            })
          }
        } else {
          wx.showToast({
            title: res.data.message || '搜索失败',
            icon: 'none'
          })
        }
      },
      fail: () => {
        wx.showToast({
          title: '搜索失败',
          icon: 'none'
        })
      }
    })
  },

  // 选择搜索结果
  selectResult: function(e) {
    const index = e.currentTarget.dataset.index
    const location = this.data.searchResults[index]
    const markerId = index + 1
    
    // 更新所有标记的图标
    const markers = this.data.markers.map(marker => ({
      ...marker,
      iconPath: marker.id === markerId ? '/images/marker_selected.png' : '/images/marker.png'
    }))
    
    this.setData({
      destination: location,
      latitude: location.location.lat,
      longitude: location.location.lng,
      scale: 16,
      showResults: false,
      markers: markers,
      selectedMarkerId: markerId
    })
  },

  startNavigation: function() {
    if (!this.data.destination) return

    // 打开微信内置地图进行导航
    wx.openLocation({
      latitude: this.data.destination.location.lat,
      longitude: this.data.destination.location.lng,
      name: this.data.destination.title,
      address: this.data.destination.address,
      scale: 18
    })
  },

  markerTap: function(e) {
    const markerId = e.markerId
    const marker = this.data.markers.find(m => m.id === markerId)
    if (marker) {
      // 更新选中状态
      const markers = this.data.markers.map(m => ({
        ...m,
        iconPath: m.id === markerId ? '/images/marker_selected.png' : '/images/marker.png'
      }))
      
      this.setData({
        markers: markers,
        selectedMarkerId: markerId
      })

      wx.showToast({
        title: marker.title,
        icon: 'none'
      })
    }
  }
})

4、编写map.json

{
  "navigationBarTitleText": "地图",
  "usingComponents": {}
}

5、编写map.wxml

<!-- 这段代码创建了一个地图组件:
- view标签作为容器，使用container类样式
- map组件用于显示地图，具有以下属性:
  - id="myMap": 地图组件的唯一标识符
  - longitude/latitude: 地图中心点的经纬度,使用{{}}绑定数据
  - scale: 地图缩放级别,默认14
  - markers: 地图上的标记点数组
  - show-location: 显示用户当前位置
  - style: 设置地图宽度100%和高度100vh(视口高度)
  - bindmarkertap: 点击标记点时触发markerTap事件处理函数
-->
<view class="container">
  <view class="search-box">
    <input 
      class="search-input" 
      placeholder="请输入目的地" 
      value="{{searchKeyword}}"
      bindinput="onSearchInput"
      bindconfirm="onSearch"
    />
    <view class="search-btn" bindtap="onSearch">搜索</view>
  </view>
  
  <map
    id="myMap"
    longitude="{{longitude}}"
    latitude="{{latitude}}"
    scale="{{scale}}"
    markers="{{markers}}"
    show-location
    style="width: 100%; height: 100vh;"
    bindmarkertap="markerTap"
  ></map>

  <!-- 搜索结果列表 -->
  <view class="search-results" wx:if="{{showResults && searchResults.length > 0}}">
    <view class="result-list">
      <view 
        class="result-item" 
        wx:for="{{searchResults}}" 
        wx:key="index"
        bindtap="selectResult"
        data-index="{{index}}"
      >
        <view class="result-title">{{item.title}}</view>
        <view class="result-address">{{item.address}}</view>
      </view>
    </view>
  </view>

  <view class="nav-btn" bindtap="startNavigation" wx:if="{{destination}}">
    开始导航
  </view>
</view>

6.编写map.mxss

.container {
  width: 100%;
  height: 100vh;
  position: relative;
}

.search-box {
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  right: 20rpx;
  z-index: 100;
  display: flex;
  background: #fff;
  padding: 10rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
}

.search-input {
  flex: 1;
  height: 70rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.search-btn {
  width: 120rpx;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  background: #07c160;
  color: #fff;
  border-radius: 6rpx;
  font-size: 28rpx;
}

.search-results {
  position: absolute;
  top: 120rpx;
  left: 20rpx;
  right: 20rpx;
  background: #fff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
  z-index: 100;
  max-height: 60vh;
  overflow-y: auto;
}

.result-list {
  padding: 10rpx;
}

.result-item {
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.result-item:last-child {
  border-bottom: none;
}

.result-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.result-address {
  font-size: 24rpx;
  color: #666;
}

.nav-btn {
  position: absolute;
  bottom: 40rpx;
  left: 50%;
  transform: translateX(-50%);
  background: #07c160;
  color: #fff;
  padding: 20rpx 60rpx;
  border-radius: 40rpx;
  font-size: 32rpx;
  box-shadow: 0 4rpx 10rpx rgba(0,0,0,0.2);
}