uniapp中使用腾讯位置服务路线规划插件

最近公司的项目中需要用到腾讯位置服务路线规划这个插件,在uniapp中的引入方法有一点点不同。
解决办法:
首先用到这个插件需要去腾讯位置服务里面申请一个key。
进入到微信开放平台点击开发里面的开发者工具

uniapp中使用腾讯位置服务路线规划插件_第1张图片

进入到腾讯位置服务网站后进入控制台就可以申请key。
申请好后在key管理里面设置key,要勾选WebServiceAPI!

uniapp中使用腾讯位置服务路线规划插件_第2张图片

然后回到微信开放平台,点击设置>第三方设置,点击添加插件搜索这个插件名就可以找到,然后申请通过,通过后接来下去代码里面配置

uniapp中使用腾讯位置服务路线规划插件_第3张图片

详情里面可以找到这个插件的appid和插件版本号在后面使用时会需要

接下来去代码中配置
在uniapp项目中找到manifest.json文件(用的hbuilderX需要点击源码视图)
声明plugins配置插件

    "mp-weixin" : {
     
        "appid" : "",
        "setting" : {
     
            "urlCheck" : false,
            "es6" : true,
            "minified" : false,
            "postcss" : true
        },
        "permission" : {
     
            "scope.userLocation" : {
     
                "desc" : "你的位置信息将用于小程序位置接口的效果展示"
            }
        },
		"plugins": {
     
		    "routePlan": {
     
		      "version": "1.0.8",
		      "provider": "wx50b5593e81dd937a"
		    }
		  }
    }

然后在pages.json文件中需要用到插件的页面配置

		{
     
            "path" : "pages/peoDetails/peoDetails",
            "style" : {
     
				"navigationBarTitleText": "用户详情",
				"mp-weixin": {
     
					"usingComponents": {
     
						"routePlan": "plugin://routePlan/index"
					}
				}
			}
		}

然后就可以在页面中使用插件啦
需要开启导航功能的话在url中加上 ‘&navigation=1’

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

效果

uniapp中使用腾讯位置服务路线规划插件_第4张图片
uniapp中使用腾讯位置服务路线规划插件_第5张图片

ojbk!

你可能感兴趣的:(javascript,小程序)