微信小程序配置地图,城市选择,地铁图,路线规划

这篇具有很好参考价值的文章主要介绍了微信小程序配置地图,城市选择,地铁图,路线规划。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序之地图选地、城市选择、地铁图、路线规划

一、简介

腾讯位置服务为微信小程序提供了基础的标点能力、线和圆的绘制接口等地图组件和位置展示、地图选点等地图API位置服务能力支持,使得开发者可以自由地实现自己的微信小程序产品。 在此基础上,腾讯位置服务微信小程序JavaScript SDK是专为小程序开发者提供的LBS数据服务工具包,可以在小程序中调用腾讯位置服务的POI检索、关键词输入提示、地址解析、逆地址解析、行政区划和距离计算等数据服务,让您的小程序更强大!

 在微信小程序中使用腾讯地图服务大致需要进行如下几个过程:

二、开通腾讯位置服务

登录进入小程序后台,选择 “开发 - 开发工具 - 腾讯位置服务”

微信小程序配置地图,城市选择,地铁图,路线规划

点击腾讯位置服务

微信小程序配置地图,城市选择,地铁图,路线规划

点击 “开通”,进入授权扫码界面,使用微信扫码进行授权

如果已经有账号了,可以绑定现有账号

三、插件申请接入

 微信小程序配置地图,城市选择,地铁图,路线规划

 点击服务,进入微信服务市场

微信小程序配置地图,城市选择,地铁图,路线规划

点击开发者资源

微信小程序配置地图,城市选择,地铁图,路线规划

点击插件,然后在搜索框中搜索“腾讯位置服务”

微信小程序配置地图,城市选择,地铁图,路线规划

点击“腾讯地图服务地图选点”

微信小程序配置地图,城市选择,地铁图,路线规划

点击“添加插件”

微信小程序配置地图,城市选择,地铁图,路线规划

打开微信扫码,然后再次点击“添加插件”

微信小程序配置地图,城市选择,地铁图,路线规划

选择小程序后点击确定。

微信小程序配置地图,城市选择,地铁图,路线规划

此时,在微信公众平台中点击设置----第三方设置----插件管理,就可以看到腾讯服务地图选点

微信小程序配置地图,城市选择,地铁图,路线规划

同理,我们可以在微信服务市场中一次性添加多个插件,如腾讯位置服务地铁图,腾讯位置服务路线规划,最终如下所示:

微信小程序配置地图,城市选择,地铁图,路线规划

点击“腾讯位置服务地图选点”右侧的详情

微信小程序配置地图,城市选择,地铁图,路线规划

地图选点appId

点击”开发文档“

微信小程序配置地图,城市选择,地铁图,路线规划

第一步插件申请接入已经完成

四、申请开发者密钥和开通webserviceAPI服务

访问https://lbs.qq.com/dev/console/application/mine,进入如下页面

微信小程序配置地图,城市选择,地铁图,路线规划

点击“个人中心”----我的信息,在这里注册成个人开放者或进行企业认证

微信小程序配置地图,城市选择,地铁图,路线规划

点击“应用管理”----我的应用,

微信小程序配置地图,城市选择,地铁图,路线规划

点击“添加Key”,进入如下界面

微信小程序配置地图,城市选择,地铁图,路线规划

小程序插件需要使用WebService API的部分服务,所以需要给使用该功能的KEY配置相应权限。

勾选WebServiceAPI和微信小程序,输入微信小程序的APPID,勾选同意协议,点击添加,进入如下页面,此时会生成密钥。

微信小程序配置地图,城市选择,地铁图,路线规划

五、使用插件"地图选点"

1、引入插件包

在app.json中添加

// app.json
{
  "plugins": {
    "chooseLocation": {
      "version": "1.0.10",
      "provider": "wx76a9a06e5b4e693e"
    }
  }
}

其中,provider填写你自己的appId,如下所示

{
    "pages": [
        "pages/home/home",
        "pages/index/index",
        "pages/logs/logs",
        "pages/login/index",
        "pages/location/location"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Weixin",
        "navigationBarTextStyle": "black"
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json",
    "lazyCodeLoading": "requiredComponents",
    "plugins": {
        "chooseLocation": {
          "version": "1.0.10",
          "provider": "wx76a9a06e5b4e693e"
        }
      }
}
2、设置定位授权

地图选点插件需要小程序提供定位授权才能够正常使用定位功能:

// app.json
{
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序定位"
    }
  }
}

如下所示:

{
    "pages": [
        "pages/home/home",
        "pages/index/index",
        "pages/logs/logs",
        "pages/login/index",
        "pages/location/location"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Weixin",
        "navigationBarTextStyle": "black"
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json",
    "lazyCodeLoading": "requiredComponents",
    "plugins": {
        "chooseLocation": {
          "version": "1.0.10",
          "provider": "wx76a9a06e5b4e693e"
        }
      },
      "permission": {
        "scope.userLocation": {
          "desc": "你的位置信息将用于小程序定位"
        }
      }
}

加了之后才能获取到小程序的定位

官方示例:

const key = ''; //使用在腾讯位置服务申请的key
const referer = ''; //调用插件的app的名称
const location = JSON.stringify({
  latitude: 39.89631551,
  longitude: 116.323459711
});
const category = '生活服务,娱乐休闲';

wx.navigateTo({
  url: `plugin://chooseLocation/index?key=${key}&referer=${referer}&location=${location}&category=${category}`
});

key为上一步中的密钥,referer为小程序的名称。

新建demo页面

demo.wxml文件内容如下:

<!--pages/demo/demo.wxml-->
<view>位置信息: {{ address.address }} </view>
<button type="primary" bindtap="chooseAddress">选取位置</button>

demo.js

// 导入插件
const chooseLocation = requirePlugin('chooseLocation');
Page({
    data: {
        address: {},//选点后的位置地址信息
        location: {} // 定位信息
    },
    onLoad() {
        var that = this
        wx.getLocation({
            success(res) {
                console.log(res)
                that.setData({
                    location: res
                })
            }
        })
    },
    // 从地图选点插件返回后,在页面的onShow生命周期函数中能够调用插件接口,取得选点结果对象
    onShow() {
        const location = chooseLocation.getLocation(); // 如果点击确认选点按钮,则返回选点结果对象,否则返回null
        console.log("location==>",location);
        if(location !=null){
            this.setData({
                address:location
            })
        }
    },
    chooseAddress() {
        const key = 'GGZBZ-JXMLJ-3OMFH-FRRBR-DIDB3-TZFEM'; //使用在腾讯位置服务申请的key,如果不清楚如何申请,请回顾我们的小程序基础教程
        const referer = 'miniprogram-1'; //调用插件的app的名称
        const location = JSON.stringify({
            latitude: this.data.location.latitude, // 纬度
            longitude: this.data.location.longitude // 经度
        });
        // 自定义分类
        const category = '生活服务';
        wx.navigateTo({
            url: `plugin://chooseLocation/index?key=${key}&referer=${referer}&location=${location}&category=${category}`
        });
    }
})

效果如下:

微信小程序配置地图,城市选择,地铁图,路线规划

点击"选取位置"

微信小程序配置地图,城市选择,地铁图,路线规划

输入框中输入武汉站,效果如下:

微信小程序配置地图,城市选择,地铁图,路线规划

六、使用插件"城市选择"

 微信小程序配置地图,城市选择,地铁图,路线规划

点击详情

微信小程序配置地图,城市选择,地铁图,路线规划

这里的城市选择器APPID,后面会用到

点击开发文档

微信小程序配置地图,城市选择,地铁图,路线规划

第一步已经完成

1、引入插件包

// app.json
{
  "plugins": {
    "citySelector": {
      "version": "1.0.2",
      "provider": "wx63ffb7b7894e99ae"
    }
  }
}

如下所示

"plugins": {
        "chooseLocation": {
            "version": "1.0.10",
            "provider": "wx76a9a06e5b4e693e"
        },
        "citySelector": {
            "version": "1.0.2",
            "provider": "wx63ffb7b7894e99ae"
          }
    },

2、设置定位授权:

城市选择器插件需要小程序提供定位授权才能够正常使用定位功能:

// app.json
{
  "permission": {
    "scope.userFuzzyLocation": {
      "desc": "你的位置信息将用于小程序定位"
    }
  }
}

如下所示:

"permission": {
        "scope.userLocation": {
            "desc": "你的位置信息将用于小程序定位"
        },
        "scope.userFuzzyLocation": {
            "desc": "你的位置信息将用于小程序定位"
          }
    }

插件调用官方示例:

const key = ''; // 使用在腾讯位置服务申请的key
const referer = ''; // 调用插件的app的名称
const hotCitys = ''; // 用户自定义的的热门城市

wx.navigateTo({
  url: `plugin://citySelector/index?key=${key}&referer=${referer}&hotCitys=${hotCitys}`,
})

新建city页面

city.wxml

<view>选择的城市:{{city.name}}</view>
<button type="primary" bindtap="goChooseCity">选择城市</button>

city.js

// 引入插件
const citySelector = requirePlugin('citySelector');
Page({
    data: {
        city: '' //选中的城市
    },
    // 从城市选择器插件返回后,在页面的onShow生命周期函数中能够调用插件接口,获取cityInfo结果对象
    onShow() {
        const selectedCity = citySelector.getCity(); // 选择城市后返回城市信息对象,若未选择返回null
        console.log("selectedCity===",selectedCity);
        if(selectedCity!=null){
            this.setData({
                city:selectedCity
            })
        }
    },
    onUnload() {
        // 页面卸载时清空插件数据,防止再次进入页面,getCity返回的是上次的结果
        citySelector.clearCity();
    },
    goChooseCity() {
        const key = 'GGZBZ-JXMLJ-3OMFH-FRRBR-DIDB3-TZFEM'; // 使用在腾讯位置服务申请的key
        const referer = 'miniprogram-1'; // 调用插件的app的名称
        const hotCitys = '武汉'; // 用户自定义的的热门城市
        wx.navigateTo({
            url: `plugin://citySelector/index?key=${key}&referer=${referer}&hotCitys=${hotCitys}`,
        })
    }
})

效果如下:

微信小程序配置地图,城市选择,地铁图,路线规划

点击”选择城市“,进入如下页面

微信小程序配置地图,城市选择,地铁图,路线规划

输入深圳

微信小程序配置地图,城市选择,地铁图,路线规划

七、使用插件"地铁图"

 微信小程序配置地图,城市选择,地铁图,路线规划

点击详情,再点击开发文档

微信小程序配置地图,城市选择,地铁图,路线规划

第一步已经完成

1、引入插件包

"plugins": {
        "chooseLocation": {
            "version": "1.0.10",
            "provider": "wx76a9a06e5b4e693e"
        },
        "citySelector": {
            "version": "1.0.2",
            "provider": "wx63ffb7b7894e99ae"
          },
          "subway": {
            "version": "1.0.13",
            "provider": "wx6aaf93c4435fa1c1"
          }
    },

2、设置定位授权:
地铁图插件需要小程序提供定位授权才能够正常使用定位功能:

"permission": {
        "scope.userLocation": {
            "desc": "你的位置信息将用于小程序定位"
        },
        "scope.userFuzzyLocation": {
            "desc": "你的位置信息将用于小程序定位"
          }
    }

 

3、使用插件

在js文件中新增调用插件: 

let plugin = requirePlugin("subway");
let key = '';  //使用在腾讯位置服务申请的key
let referer = '';   //调用插件的app的名称
wx.navigateTo({
  url: 'plugin://subway/index?key=' + key + '&referer=' + referer
});

新建subway页面

 subway.wxml

<view class="container">
    <button type="primary" bindtap="trainFind">地铁地铁查询</button>
</view>

subway.js

Page({
  data: {

  },
  onLoad: function () {

  },
  trainFind(){
      let plugin = requirePlugin("subway");
      let key = 'GGZBZ-JXMLJ-3OMFH-FRRBR-DIDB3-TZFEM';
      let referer = 'miniprogram-1'; 
      wx.navigateTo({
       url: 'plugin://subway/index?key=' + key + '&referer=' + referer
      });
  }
})

效果如下:

微信小程序配置地图,城市选择,地铁图,路线规划

点击”地铁查询“按钮

微信小程序配置地图,城市选择,地铁图,路线规划

输入起点站和终点站

微信小程序配置地图,城市选择,地铁图,路线规划

八、使用插件"路线规划"

 微信小程序配置地图,城市选择,地铁图,路线规划

第一步已经完成

1、引入插件包

"plugins": {
        "chooseLocation": {
            "version": "1.0.10",
            "provider": "wx76a9a06e5b4e693e"
        },
        "citySelector": {
            "version": "1.0.2",
            "provider": "wx63ffb7b7894e99ae"
          },
          "subway": {
            "version": "1.0.13",
            "provider": "wx6aaf93c4435fa1c1"
          },
          "routePlan": {
            "version": "1.0.19",
            "provider": "wx50b5593e81dd937a"
          }
    },

2、设置定位授权

"permission": {
        "scope.userLocation": {
            "desc": "你的位置信息将用于小程序定位"
        },
        "scope.userFuzzyLocation": {
            "desc": "你的位置信息将用于小程序定位"
          }
    }

3、使用

插件页面调用官方示例:

let plugin = requirePlugin('routePlan');
let key = '';  //使用在腾讯位置服务申请的key
let referer = '';   //调用插件的app的名称
let endPoint = JSON.stringify({  //终点
  'name': '北京西站',
  'latitude': 39.894806,
  'longitude': 116.321592
});
wx.navigateTo({
  url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
});

新建plan页面

plan.wxml

<view class="container">
    <button type="primary" bindtap="routePlanning">路线规划</button>
</view>

plan.js

Page({
    data: {
  
    },
    onLoad: function () {
  
    },
    routePlanning(){
        let key = 'GGZBZ-JXMLJ-3OMFH-FRRBR-DIDB3-TZFEM';
        let referer = 'miniprogram-1'; 
        let endPoint = JSON.stringify({  //终点
            'name': '吉野家(北京西站北口店)',
            'latitude': 39.89631551,
            'longitude': 116.323459711
        });
        wx.navigateTo({
            url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
        });
    }
  })

效果如下

微信小程序配置地图,城市选择,地铁图,路线规划

点击路线规划按钮

微信小程序配置地图,城市选择,地铁图,路线规划文章来源地址https://www.toymoban.com/news/detail-711206.html

一、简介

腾讯位置服务为微信小程序提供了基础的标点能力、线和圆的绘制接口等地图组件和位置展示、地图选点等地图API位置服务能力支持,使得开发者可以自由地实现自己的微信小程序产品。 在此基础上,腾讯位置服务微信小程序JavaScript SDK是专为小程序开发者提供的LBS数据服务工具包,可以在小程序中调用腾讯位置服务的POI检索、关键词输入提示、地址解析、逆地址解析、行政区划和距离计算等数据服务,让您的小程序更强大!

 在微信小程序中使用腾讯地图服务大致需要进行如下几个过程:

二、开通腾讯位置服务

登录进入小程序后台,选择 “开发 - 开发工具 - 腾讯位置服务”

微信小程序配置地图,城市选择,地铁图,路线规划

点击腾讯位置服务

微信小程序配置地图,城市选择,地铁图,路线规划

点击 “开通”,进入授权扫码界面,使用微信扫码进行授权

如果已经有账号了,可以绑定现有账号

三、插件申请接入

 微信小程序配置地图,城市选择,地铁图,路线规划

 点击服务,进入微信服务市场

微信小程序配置地图,城市选择,地铁图,路线规划

点击开发者资源

微信小程序配置地图,城市选择,地铁图,路线规划

点击插件,然后在搜索框中搜索“腾讯位置服务”

微信小程序配置地图,城市选择,地铁图,路线规划

点击“腾讯地图服务地图选点”

微信小程序配置地图,城市选择,地铁图,路线规划

点击“添加插件”

微信小程序配置地图,城市选择,地铁图,路线规划

打开微信扫码,然后再次点击“添加插件”

微信小程序配置地图,城市选择,地铁图,路线规划

选择小程序后点击确定。

微信小程序配置地图,城市选择,地铁图,路线规划

此时,在微信公众平台中点击设置----第三方设置----插件管理,就可以看到腾讯服务地图选点

微信小程序配置地图,城市选择,地铁图,路线规划

同理,我们可以在微信服务市场中一次性添加多个插件,如腾讯位置服务地铁图,腾讯位置服务路线规划,最终如下所示:

微信小程序配置地图,城市选择,地铁图,路线规划

点击“腾讯位置服务地图选点”右侧的详情

微信小程序配置地图,城市选择,地铁图,路线规划

地图选点appId

点击”开发文档“

微信小程序配置地图,城市选择,地铁图,路线规划

第一步插件申请接入已经完成

四、申请开发者密钥和开通webserviceAPI服务

访问https://lbs.qq.com/dev/console/application/mine,进入如下页面

微信小程序配置地图,城市选择,地铁图,路线规划

点击“个人中心”----我的信息,在这里注册成个人开放者或进行企业认证

微信小程序配置地图,城市选择,地铁图,路线规划

点击“应用管理”----我的应用,

微信小程序配置地图,城市选择,地铁图,路线规划

点击“添加Key”,进入如下界面

微信小程序配置地图,城市选择,地铁图,路线规划

小程序插件需要使用WebService API的部分服务,所以需要给使用该功能的KEY配置相应权限。

勾选WebServiceAPI和微信小程序,输入微信小程序的APPID,勾选同意协议,点击添加,进入如下页面,此时会生成密钥。

微信小程序配置地图,城市选择,地铁图,路线规划

五、使用插件"地图选点"

1、引入插件包

在app.json中添加

// app.json
{
  "plugins": {
    "chooseLocation": {
      "version": "1.0.10",
      "provider": "wx76a9a06e5b4e693e"
    }
  }
}

其中,provider填写你自己的appId,如下所示

{
    "pages": [
        "pages/home/home",
        "pages/index/index",
        "pages/logs/logs",
        "pages/login/index",
        "pages/location/location"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Weixin",
        "navigationBarTextStyle": "black"
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json",
    "lazyCodeLoading": "requiredComponents",
    "plugins": {
        "chooseLocation": {
          "version": "1.0.10",
          "provider": "wx76a9a06e5b4e693e"
        }
      }
}
2、设置定位授权

地图选点插件需要小程序提供定位授权才能够正常使用定位功能:

// app.json
{
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序定位"
    }
  }
}

如下所示:

{
    "pages": [
        "pages/home/home",
        "pages/index/index",
        "pages/logs/logs",
        "pages/login/index",
        "pages/location/location"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Weixin",
        "navigationBarTextStyle": "black"
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json",
    "lazyCodeLoading": "requiredComponents",
    "plugins": {
        "chooseLocation": {
          "version": "1.0.10",
          "provider": "wx76a9a06e5b4e693e"
        }
      },
      "permission": {
        "scope.userLocation": {
          "desc": "你的位置信息将用于小程序定位"
        }
      }
}

加了之后才能获取到小程序的定位

官方示例:

const key = ''; //使用在腾讯位置服务申请的key
const referer = ''; //调用插件的app的名称
const location = JSON.stringify({
  latitude: 39.89631551,
  longitude: 116.323459711
});
const category = '生活服务,娱乐休闲';

wx.navigateTo({
  url: `plugin://chooseLocation/index?key=${key}&referer=${referer}&location=${location}&category=${category}`
});

key为上一步中的密钥,referer为小程序的名称。

新建demo页面

demo.wxml文件内容如下:

<!--pages/demo/demo.wxml-->
<view>位置信息: {{ address.address }} </view>
<button type="primary" bindtap="chooseAddress">选取位置</button>

demo.js

// 导入插件
const chooseLocation = requirePlugin('chooseLocation');
Page({
    data: {
        address: {},//选点后的位置地址信息
        location: {} // 定位信息
    },
    onLoad() {
        var that = this
        wx.getLocation({
            success(res) {
                console.log(res)
                that.setData({
                    location: res
                })
            }
        })
    },
    // 从地图选点插件返回后,在页面的onShow生命周期函数中能够调用插件接口,取得选点结果对象
    onShow() {
        const location = chooseLocation.getLocation(); // 如果点击确认选点按钮,则返回选点结果对象,否则返回null
        console.log("location==>",location);
        if(location !=null){
            this.setData({
                address:location
            })
        }
    },
    chooseAddress() {
        const key = 'GGZBZ-JXMLJ-3OMFH-FRRBR-DIDB3-TZFEM'; //使用在腾讯位置服务申请的key,如果不清楚如何申请,请回顾我们的小程序基础教程
        const referer = 'miniprogram-1'; //调用插件的app的名称
        const location = JSON.stringify({
            latitude: this.data.location.latitude, // 纬度
            longitude: this.data.location.longitude // 经度
        });
        // 自定义分类
        const category = '生活服务';
        wx.navigateTo({
            url: `plugin://chooseLocation/index?key=${key}&referer=${referer}&location=${location}&category=${category}`
        });
    }
})

效果如下:

微信小程序配置地图,城市选择,地铁图,路线规划

点击"选取位置"

微信小程序配置地图,城市选择,地铁图,路线规划

输入框中输入武汉站,效果如下:

微信小程序配置地图,城市选择,地铁图,路线规划

六、使用插件"城市选择"

 微信小程序配置地图,城市选择,地铁图,路线规划

点击详情

微信小程序配置地图,城市选择,地铁图,路线规划

这里的城市选择器APPID,后面会用到

点击开发文档

微信小程序配置地图,城市选择,地铁图,路线规划

第一步已经完成

1、引入插件包

// app.json
{
  "plugins": {
    "citySelector": {
      "version": "1.0.2",
      "provider": "wx63ffb7b7894e99ae"
    }
  }
}

如下所示

"plugins": {
        "chooseLocation": {
            "version": "1.0.10",
            "provider": "wx76a9a06e5b4e693e"
        },
        "citySelector": {
            "version": "1.0.2",
            "provider": "wx63ffb7b7894e99ae"
          }
    },

2、设置定位授权:

城市选择器插件需要小程序提供定位授权才能够正常使用定位功能:

// app.json
{
  "permission": {
    "scope.userFuzzyLocation": {
      "desc": "你的位置信息将用于小程序定位"
    }
  }
}

如下所示:

"permission": {
        "scope.userLocation": {
            "desc": "你的位置信息将用于小程序定位"
        },
        "scope.userFuzzyLocation": {
            "desc": "你的位置信息将用于小程序定位"
          }
    }

插件调用官方示例:

const key = ''; // 使用在腾讯位置服务申请的key
const referer = ''; // 调用插件的app的名称
const hotCitys = ''; // 用户自定义的的热门城市

wx.navigateTo({
  url: `plugin://citySelector/index?key=${key}&referer=${referer}&hotCitys=${hotCitys}`,
})

新建city页面

city.wxml

<view>选择的城市:{{city.name}}</view>
<button type="primary" bindtap="goChooseCity">选择城市</button>

city.js

// 引入插件
const citySelector = requirePlugin('citySelector');
Page({
    data: {
        city: '' //选中的城市
    },
    // 从城市选择器插件返回后,在页面的onShow生命周期函数中能够调用插件接口,获取cityInfo结果对象
    onShow() {
        const selectedCity = citySelector.getCity(); // 选择城市后返回城市信息对象,若未选择返回null
        console.log("selectedCity===",selectedCity);
        if(selectedCity!=null){
            this.setData({
                city:selectedCity
            })
        }
    },
    onUnload() {
        // 页面卸载时清空插件数据,防止再次进入页面,getCity返回的是上次的结果
        citySelector.clearCity();
    },
    goChooseCity() {
        const key = 'GGZBZ-JXMLJ-3OMFH-FRRBR-DIDB3-TZFEM'; // 使用在腾讯位置服务申请的key
        const referer = 'miniprogram-1'; // 调用插件的app的名称
        const hotCitys = '武汉'; // 用户自定义的的热门城市
        wx.navigateTo({
            url: `plugin://citySelector/index?key=${key}&referer=${referer}&hotCitys=${hotCitys}`,
        })
    }
})

效果如下:

微信小程序配置地图,城市选择,地铁图,路线规划

点击”选择城市“,进入如下页面

微信小程序配置地图,城市选择,地铁图,路线规划

输入深圳

微信小程序配置地图,城市选择,地铁图,路线规划

七、使用插件"地铁图"

 微信小程序配置地图,城市选择,地铁图,路线规划

点击详情,再点击开发文档

微信小程序配置地图,城市选择,地铁图,路线规划

第一步已经完成

1、引入插件包

"plugins": {
        "chooseLocation": {
            "version": "1.0.10",
            "provider": "wx76a9a06e5b4e693e"
        },
        "citySelector": {
            "version": "1.0.2",
            "provider": "wx63ffb7b7894e99ae"
          },
          "subway": {
            "version": "1.0.13",
            "provider": "wx6aaf93c4435fa1c1"
          }
    },

2、设置定位授权:
地铁图插件需要小程序提供定位授权才能够正常使用定位功能:

"permission": {
        "scope.userLocation": {
            "desc": "你的位置信息将用于小程序定位"
        },
        "scope.userFuzzyLocation": {
            "desc": "你的位置信息将用于小程序定位"
          }
    }

 

3、使用插件

在js文件中新增调用插件: 

let plugin = requirePlugin("subway");
let key = '';  //使用在腾讯位置服务申请的key
let referer = '';   //调用插件的app的名称
wx.navigateTo({
  url: 'plugin://subway/index?key=' + key + '&referer=' + referer
});

新建subway页面

 subway.wxml

<view class="container">
    <button type="primary" bindtap="trainFind">地铁地铁查询</button>
</view>

subway.js

Page({
  data: {

  },
  onLoad: function () {

  },
  trainFind(){
      let plugin = requirePlugin("subway");
      let key = 'GGZBZ-JXMLJ-3OMFH-FRRBR-DIDB3-TZFEM';
      let referer = 'miniprogram-1'; 
      wx.navigateTo({
       url: 'plugin://subway/index?key=' + key + '&referer=' + referer
      });
  }
})

效果如下:

微信小程序配置地图,城市选择,地铁图,路线规划

点击”地铁查询“按钮

微信小程序配置地图,城市选择,地铁图,路线规划

输入起点站和终点站

微信小程序配置地图,城市选择,地铁图,路线规划

八、使用插件"路线规划"

 微信小程序配置地图,城市选择,地铁图,路线规划

第一步已经完成

1、引入插件包

"plugins": {
        "chooseLocation": {
            "version": "1.0.10",
            "provider": "wx76a9a06e5b4e693e"
        },
        "citySelector": {
            "version": "1.0.2",
            "provider": "wx63ffb7b7894e99ae"
          },
          "subway": {
            "version": "1.0.13",
            "provider": "wx6aaf93c4435fa1c1"
          },
          "routePlan": {
            "version": "1.0.19",
            "provider": "wx50b5593e81dd937a"
          }
    },

2、设置定位授权

"permission": {
        "scope.userLocation": {
            "desc": "你的位置信息将用于小程序定位"
        },
        "scope.userFuzzyLocation": {
            "desc": "你的位置信息将用于小程序定位"
          }
    }

3、使用

插件页面调用官方示例:

let plugin = requirePlugin('routePlan');
let key = '';  //使用在腾讯位置服务申请的key
let referer = '';   //调用插件的app的名称
let endPoint = JSON.stringify({  //终点
  'name': '北京西站',
  'latitude': 39.894806,
  'longitude': 116.321592
});
wx.navigateTo({
  url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
});

新建plan页面

plan.wxml

<view class="container">
    <button type="primary" bindtap="routePlanning">路线规划</button>
</view>

plan.js

Page({
    data: {
  
    },
    onLoad: function () {
  
    },
    routePlanning(){
        let key = 'GGZBZ-JXMLJ-3OMFH-FRRBR-DIDB3-TZFEM';
        let referer = 'miniprogram-1'; 
        let endPoint = JSON.stringify({  //终点
            'name': '吉野家(北京西站北口店)',
            'latitude': 39.89631551,
            'longitude': 116.323459711
        });
        wx.navigateTo({
            url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
        });
    }
  })

效果如下

微信小程序配置地图,城市选择,地铁图,路线规划

点击路线规划按钮

微信小程序配置地图,城市选择,地铁图,路线规划

到了这里,关于微信小程序配置地图,城市选择,地铁图,路线规划的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包