微信小程序腾讯位置服务地图选点和路线规划

最新推荐文章于 2024-07-11 14:21:02 发布

12程序猿

最新推荐文章于 2024-07-11 14:21:02 发布

阅读量4.7k

点赞数 4

分类专栏：微信小程序腾讯位置服务

本文链接：https://blog.csdn.net/qq_26383975/article/details/107336904

版权

本文介绍如何在微信小程序中利用腾讯位置服务插件实现地图选点及路线规划功能，包括开发过程和代码实现，提供了详细的开发指南链接及源码下载地址。

摘要由CSDN通过智能技术生成

微信小程序使用腾讯位置服务插件实现地图选点和路线规划

效果图：

在这里插入图片描述

实现过程

点击“开发指南”，根据对应打开网页中的接入指引进行开发实现。

腾讯位置服务地图选点:开发指南
腾讯位置服务路线规划:开发指南

实现代码

1.app.json中添加如下代码

  "plugins":{
    "chooseLocation":{
       "version":"1.0.2",
       "provider":"wx76a9a06e5b4e693e"
    },
    "routePlan":{
      "version":"1.0.5",
      "provider":"wx50b5593e81dd937a"
    }
  },
  "permission":{
    "scope.userLocation":{
      "desc":"您的位置信息将用于小程序定位"
    }
  },

2.city.wxml

<view class="main">
    <view class="row" bindtap = "clickMap">
        <view class="hintText">地图选点</view>
        <image class="rightArrow" src="{
   {rightArrow}}" ></image>
    </view>
    <view class="line"></view>
    <view class="row" bindtap = "routePlan">
        <view class="hintText">路线规划</view>
        <image class="rightArrow" src="{
   {rightArrow}}" ></image>
    </view>
</view>
<view class="main" wx:if="{
   {address}}" >
    <view class="addressRow" bindtap = "clickMap">
        <view class="addressHint">地图选点位置：</view>
        <view class="hintText">{
   {
   address}}</view>
    </view>
</view>

3. city.js

// pages/city/city.js
const chooseLocation = requirePlugin('chooseLocation')//地图选点结果插件实例
Page({
   

	/**
	 * 页面的初始数据
	 */
	data: {
   
		latitude:"",
		longitude:"",
		address:"",
		key: 'VEHBZ-QXKLW-YRMR4-RWZSZ-UNGOS-FLFFM',//在腾讯位置服务申请的key
		referer: '微信小程序定位', //调用腾讯位置服务相关插件的app的名称
		rightArrow:"../../images/rightArrow.png"
	},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function (options) {
   

	},
	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow: function (