搜索到
2
篇与
的结果
-
油耗笔记OilNote集成腾讯地图实现载在图选择加油站充电站功能 油耗笔记OilNote经过两轮迭代，将地图服务由高德地图切换到百度地图，最终定格到了腾讯地图。在前面，我们已经实现了逆地址解析及周边搜索功能。接下来我们要实现打开地图，在图直接选择加油站功能。我们使用腾讯地图提供的微信小程序JavaScript SDK实现在线地图功能。一、微信小程序JavaScript SDK介绍腾讯位置服务为微信小程序提供了基础的标点能力、线和圆的绘制接口等地图组件和位置展示、地图选点等地图API位置服务能力支持，使得开发者可以自由地实现自己的微信小程序产品。 在此基础上，腾讯位置服务微信小程序JavaScript SDK是专为小程序开发者提供的LBS数据服务工具包，可以在小程序中调用腾讯位置服务的POI检索、关键词输入提示、地址解析、逆地址解析、行政区划和距离计算等数据服务，让您的小程序更强大！微信小程序JavaScript SDK开发文档二、微信小程序JavaScript SDK使用2.1、小程序域名设置在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名，添加https://apis.map.qq.com2.2、引入SDK下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.1 JavaScriptSDK v1.2，并将解压后的.js文件引入工程中。2.3、页面引入2.3.1、在页面引入脚本文件 // 引入SDK核心类，js文件根据自己业务，位置可自行放置 var QQMapWX = require('../../common/utils/qqmap-wx-jssdk.min.js'); //引入下载好的sdk var qqmapsdk; // 实例化API核心类 qqmapsdk = new QQMapWX({ key: LocationUtils.TENCENT_MAP_KEY });2.3.2、查询加油站//页面加载 onLoad(options) { let that = this; this.latitude = uni.getStorageSync('latitude'); this.longitude = uni.getStorageSync('longitude'); this.oilType = options.oilType === '电' ? '充电站' : '加油站' let iconPath = 'https://qiniu.xiangcaowuyu.net/oilnote/images/chargingPile.png'; if (options.oilType !== '电') { iconPath = 'https://qiniu.xiangcaowuyu.net/oilnote/images/oilStation.png'; } // 调用接口 qqmapsdk.search({ keyword: encodeURI(that.oilType), location: { latitude: that.latitude, longitude: that.longitude }, page_size: 20, auto_extend: '1', success: function(res) { var selfLocation = { id: -1, latitude: that.latitude, longitude: that.longitude, width: 20, height: 20, iconPath: 'https://qiniu.xiangcaowuyu.net/oilnote/images/location.png', title: "我的位置", callout: { content: '我的位置', color: '#adec9c', display: 'BYCLICK', borderRadius: 5, } }; that.makers.push(selfLocation); if (res.status === 0) { res.data.forEach((item, index) => { let obj = { id: index, latitude: item.location.lat, longitude: item.location.lng, width: 20, height: 20, iconPath: iconPath, title: item.title, callout: { content: item.title, bgColor: '#adec9c', display: 'ALWAYS', borderRadius: 5, } }; that.makers.push(obj); }) } }, fail: function(res) { console.log(res); }, }) }markers数组就是我们要标记的坐标点，数组中对象的属性id，表示标记点id，类型为Number，必填项，marker点击事件回调会返回此id，建议为每个marker设置上Number类型id，保证更新marker时有更好的性能。latitude，纬度，类型Number，必填项，浮点数，范围 -90 ~ 90longitude，经度，类型Number，必填项，浮点数，范围 -180 ~ 180title，标注点名，类型String，不是必填，点击时显示，callout存在时将被忽略iconPath，显示的图标，类型String，必填项，项目目录下的图片路径rotate，旋转角度，类型Number，不是必填，顺时针旋转的角度，范围 0 ~ 360，默认为 0alpha，标注的透明度，类型Number，不是必填，默认1，无透明，范围 0 ~ 1width，标注图标宽度，类型Number，不是必填，默认为图片实际宽度height，标注图标高度，类型Number，不是必填，默认为图片实际高度callout，自定义标记点上方的气泡窗口，类型Object，不是必填 - 可识别换行符label，为标记点旁边增加标签，类型Object，不是必填 - 可识别换行符anchor，经纬度在标注图标的锚点，默认底边中点，不是必填，{x, y}，x表示横向(0-1)，y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点。marker上的气泡callout（Object类型）, marker数组上属性callout对象使用属性：content，文本，Stringcolor，文本颜色，StringfontSize，文字大小，NumberborderRadius，callout边框圆角，NumberbgColor，背景色，Stringpadding，文本边缘留白，Numberdisplay，'BYCLICK':点击显示; 'ALWAYS':常显，StringtextAlign，文本对齐方式。有效值: left, right, center，Stringmarker上的标签label（Object类型）content，文本，Stringcolor，文本颜色，StringfontSize，文字大小，Numberx，label的坐标，原点是 marker 对应的经纬度，Numbery，label的坐标，原点是 marker 对应的经纬度，NumberborderWidth，边框宽度，NumberborderColor，边框颜色，StringborderRadius，边框圆角，NumberbgColor，背景色，Stringpadding，文本边缘留白，NumbertextAlign，文本对齐方式。有效值: left, right, center，String2.3.3、界面展示获取到数据之后，就是通过marker属性进行展示<map @tap="getMapLocation" :style="[{height:'calc(100vh - ' + CustomBar + 'px - 50px)'}]" style="width:100%" :latitude="latitude" :longitude="longitude" :markers="makers" @markertap="markerTap"> </map>2.3.3.1、地图组件的属性：longitude（类型为Number，没有默认值，表示中心经度）latitude（类型为Number，没有默认值，表示中心纬度）scale（类型为Number，默认值为16，缩放级别取值范围为5-18）markers（类型为Array数组，类型为数组即表示地图上可以有多个，没有默认值，表示标记点）polyline（类型为Array数组，没有默认值，表示路线，数组上的所有点连成线）circles（类型Array数组，表示圆）controls（类型Array数组，表示控件）include-points（类型Array数组，表示缩放视野已包含所有给定的坐标点）enable-3D（类型为Boolean，默认值为false，表示是否显示3D搂块）show-compass（类型为Boolean，默认值为false，表示为是否显示指南针）enable-overlooking（类型为Boolean，默认值为false，表示为是否开启俯视）enable-satellite（类型为Boolean，默认值为false，表示为是否开启卫星图）enable-traffic（类型为Boolean，默认值为false，表示为是否开启实时路况）show-location（类型为Boolean，表示显示带有方向的当前定位点）polygons（类型Array，表示为多边形）2.3.3.2、组件方法@markertap-表示点击标记点时触发，e.detail={markerId}@labeltap-表示点击label时触发，e.detail = {markerId}@callouttap-表示点击标记点对应的气泡时触发，e.detail = {markerId}@controltap-表示点击控件时触发，e.detail = {controlId}@regionchange-表示视野发生变化时触发@tap-表示点击地图时触发; App-nuve、微信小程序2.9支持返回经纬度@updated-表示在地图渲染更新完成时触发 -
油耗笔记OilNote周边搜索能力由百度地图切换成腾讯地图 油耗笔记OilNote其实对地图搜索能力，其实就是查询周边加油站的功能进行过一次升级，上次升级是将地图搜索能力由高德地图切换成了百度地图，切换原因也非常简单，高德地图无耻的将每日额度改成了100，根本没法用了。具体切换过程，感兴趣的可以看看。油耗笔记OilNote周边搜索能力由高德地图切换成百度地图 - 香草物语 (xiangcaowuyu.net)一、为什么又不用百度地图了1.1、对搜索结果不满意其实，从高德地图切换到百度地图也不过一天的时间。之所以不使用百度地图，最根本的原因，是百度地图所谓的圆形搜索能力真的太差劲了。好多东西根本就搜不到。而且作为记录油耗的一个小程序，搜索周边加油站其实是最基础最基本的一个功能，但是百度地图的圆形搜索能力简直就弱爆了。明明旁边就有加油站，死活就是搜索不到。但是百度地图自己却能搜索到。比如这个地图是当时使用百度地图的搜索加油站的结果下面这个是切换到腾讯地图在相同位置的搜索加油站的结果但是，百度地图搜索的充电站数量好像也不少，跟腾讯地图也有差不多。1.2、坐标转换比较麻烦使用uni.getLocation()方法虽然获取到的坐标是gcj02，但是在百度地图下，得使用百度的坐标，必须转换一次，不然坐标误差是非常大的。1.3、官方文档写的太乱百度地图的官方文档写的，真的是一言难尽。1.4、资料很少貌似很多人都用高德的地图API，网上一搜很多，但是百度地图的相对就比较少了。虽然腾讯地图网上资料比较少，但是官网的开发文档还是很清晰明了的，这在一定程度上弥补了网上资料少的缺点。二、腾讯地图额度信息腾讯地图也是比较良心的，每日额度是三家里面最多的10000次/天，是高德地图的100倍，百度地图的2倍。缺点就是并发比较少，只有5次/秒。对于我们现阶段也是很充足的了。三、微信公众平台配置如果使用腾讯地图，必须提前把腾讯地图Api放到域名白名单里面。微信小程序后台，依次定位到开发管理→开发设置→服务器域名，在request合法域名里面加上百度地图的网址https://apis.map.qq.com/如果微信开发者工具提示域名不合法，记得刷新一下开发者工具的域名信息。刷新后记得重新编译项目。三、获取附近加油站功能改造其实三家地图的API都是类似的，我这里主要用了两个API，逆地址解析geocoder还有地点搜索search3.1、逆地址解析用于将uniapp获取到的经纬度解析成实际位置。let getLocation = function(radius = 1000, successFn) { var latitude = '' //纬度 var longitude = '' //经度 if (uni.getStorageSync('position') == '') { uni.getLocation({ geocode: true, type: 'gcj02', altitude: true, accuracy: 'best', isHighAccuracy: true, success: (res) => { console.log('位置是', res) latitude = res.latitude longitude = res.longitude uni.setStorageSync('latitude', latitude) uni.setStorageSync('longitude', longitude) uni.request({ url: 'https://apis.map.qq.com/ws/geocoder/v1/?key=' + TENCENT_MAP_KEY + '&location=' + latitude + ',' + longitude + '&get_poi=1&output=json', success: function(res) { let result = res.data.result let province = result.address_component.province let city = result.address_component.city // 省份名称 uni.setStorageSync('province', province) // 城市名称 uni.setStorageSync('city', city) // 城市编号 uni.setStorageSync('citycode', result.ad_info.city_code) successFn(result, province, city) }, fail(err) { console.log('获取位置信息失败：' + JSON.stringify(err)) } }) }, fail: (err) => { console.log('获取位置信息失败：' + JSON.stringify(err)) } }) } }接口示例https://apis.map.qq.com/ws/geocoder/v1/?location=39.984154,116.307490&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&get_poi=1请求参数参数必填说明示例key是开发密钥（Key）key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-*location是经纬度（GCJ02坐标系），格式： location=lat<纬度>,lng<经度>location= 39.984154,116.307490get_poi否是否返回周边地点（POI）列表，可选值： 0 不返回(默认) 1 返回get_poi=1poi_options否周边POI列表控制参数： 1 poi_options=address_format=short 返回短地址，缺省时返回长地址 2 poi_options=radius=5000 半径，取值范围 1-5000（米） 3 poi_options=policy=1/2/3/4/5 控制返回场景， policy=1[默认] 以地标+主要的路+近距离POI为主，着力描述当前位置； policy=2 到家场景：筛选合适收货的POI，并会细化收货地址，精确到楼栋； policy=3 出行场景：过滤掉车辆不易到达的POI(如一些景区内POI)，增加道路出入口、交叉口、大区域出入口类POI，排序会根据真实API大用户的用户点击自动优化。 policy=4 社交签到场景，针对用户签到的热门 地点进行优先排序。 policy=5 位置共享场景，用户经常用于发送位置、位置分享等场景的热门地点优先排序 4 注：policy=1/2/3最多返回10条周边POI，policy=4/5最多返回20条， 如需更多请参见地点搜索-周边推荐【单个参数写法示例】： poi_options=address_format=short 【多个参数英文分号间隔，写法示例】： poi_options=address_format=short;radius=5000;policy=2output否返回格式：支持JSON/JSONP，默认JSONoutput=jsoncallback否JSONP方式回调函数callback=function1响应结果名称类型必填说明 statusnumber是状态码，0为正常，其它为异常，详细请参阅状态码说明 messagestring是状态说明 request_idstring是本次请求的唯一标识 resultobject是逆地址解析结果 addressstring是以行政区划+道路+门牌号等信息组成的标准格式化地址formatted_addressesobject否结合知名地点形成的描述性地址，更具人性化特点 recommendstring否推荐使用的地址描述，描述精确性较高roughstring否粗略位置描述 address_componentobject是地址部件，address不满足需求时可自行拼接 nationstring是国家provincestring是省 citystring是市，如果当前城市为省直辖县级区划，city与district字段均会返回此城市 注：省直辖县级区划adcode第3和第4位分别为9、0，如济源市adcode为419001 districtstring否区，可能为空字串 streetstring否街道，可能为空字串 street_numberstring否门牌，可能为空字串 ad_infoobject是行政区划信息 nation_codestring是国家代码（ISO3166标准3位数字码） adcodestring是行政区划代码，规则详见：行政区划代码说明 city_codestring是城市代码，由国家码+行政区划代码（提出城市级别）组合而来，总共为9位namestring是行政区划名称 locationobject是行政区划中心点坐标 latnumber是纬度lngnumber是经度 nationstring是国家 provincestring是省 / 直辖市 citystring是市 / 地级区 及同级行政区划，如果当前城市为省直辖县级区划，city与district字段均会返回此城市 注：省直辖县级区划adcode第3和第4位分别为9、0，如济源市adcode为419001 districtstring否区 / 县级市 及同级行政区划 address_referenceobject否坐标相对位置参考 famous_areaobject否知名区域，如商圈或人们普遍认为有较高知名度的区域 idstring是地点唯一标识titlestring否名称/标题 locationobject否坐标 latnumber否纬度lngnumber否经度 _distancenumber否此参考位置到输入坐标的直线距离 _dir_descstring否此参考位置到输入坐标的方位关系，如：北、南、内 business_areaobject否商圈，目前与famous_area一致 townobject否乡镇街道 idstring是地点唯一标识titlestring否名称/标题 locationobject否坐标 latnumber否纬度lngnumber否经度 _distancenumber否此参考位置到输入坐标的直线距离 _dir_descstring否此参考位置到输入坐标的方位关系，如：北、南、内 landmark_l1object否一级地标，可识别性较强、规模较大的地点、小区等 【注】对象结构同 famous_area landmark_l2object否二级地标，较一级地标更为精确，规模更小 【注】：对象结构同 famous_area streetobject否街道 【注】：对象结构同 famous_area street_numberobject否门牌 【注】：对象结构同 famous_area crossroadobject否交叉路口 【注】：对象结构同 famous_area waterobject否水系 【注】：对象结构同 famous_area poi_countnumber 查询的周边poi的总数，仅在传入参数get_poi=1时返回 poisarray否周边地点（POI）数组，数组中每个子项为一个POI对象 idstring否地点（POI）唯一标识titlestring否名称 addressstring否地址 categorystring否地点分类信息 locationobject否提示所述位置坐标 latnumber否纬度lngnumber否经度 ad_infoobject否行政区划信息 adcodenumber是行政区划代码provincestring是省，如果当前城市为直辖市，返回空 citystring是市，如果当前城市为省直辖县级区划，city与district字段均会返回此城市 注：省直辖县级区划adcode第3和第4位分别为9、0，如济源市adcode为419001 districtstring是区 _distancenumber否该POI到逆地址解析传入的坐标的直线距离 3.2、获取附近加油站let getOilStation = function(stationType = '加油站', radius = 1000, successFn) { let latitude = uni.getStorageSync('latitude') //纬度 let longitude = uni.getStorageSync('longitude') //经度 uni.request({ url: 'https://apis.map.qq.com/ws/place/v1/search?key=' + TENCENT_MAP_KEY + '&boundary=nearby(' + latitude + ',' + longitude + ',' + radius + ',0)' + '&keyword=' + encodeURI(stationType) + '&page_size=20&page_index=1' + '&orderby=_distance&output=json', success: function(res) { successFn(res) } }) }请求URLhttps://apis.map.qq.com/ws/place/v1/search请求参数请求方式（Method）： GET参数必填说明示例key是开发密钥（Key）key=OB4BZ-D4W3U-*keyword是搜索关键字，长度最大96个字节，注：keyword仅支持检索一个。 （API采用UTF-8字符编码，1个英文字符占用1个字节， 1个中文字符占3个字节，具体请参阅相关技术资料）keyword=酒店，注意键值要进行URL编码（推荐encodeURI），如 keyword=%e9%85%92%e5%ba%97boundary是格式： boundary=nearby(lat,lng,radius[, auto_extend]) 子参数： lat,lng：搜索中心点的经纬度，格式顺序为纬度在前，经度在后 radius：搜索半径，单位：米，取值范围：10到1000 auto_extend：[可选] 当前范围无结果时，是否自动扩大范围，取值： 0 不扩大 1 [默认] 自动扩大范围（依次按照按1公里、2公里、5公里， 最大到全城市范围搜索）boundary=nearby(28.681114,115.918377,1000,1)get_subpois否是否返回子地点，如大厦停车场、出入口等取值： 0 [默认]不返回 1 返回get_subpois=1filter否筛选条件 1. 指定分类筛选，语句格式为： category=分类名1,分类名2 最多支持5个分类词（支持的分类请参考：POI分类表） 2. 排除指定分类，语句格式为： category<>分类名1,分类名2 最多支持5个分类词（支持的分类请参考：POI分类表） 3. 筛选有电话的地点：tel<>null搜索指定分类 filter=category=公交站 搜索多个分类 filter=category=大学,中学 排除指定分类 filter=category<>商务楼宇 （注意参数值要进行url编码）orderby否排序，支持按距离由近到远排序，取值：_distance 说明： 1. 周边搜索默认排序会综合考虑距离、权重等多方面因素 2. 设置按距离排序后则仅考虑距离远近，一些低权重的地点可能因距离近排在前面，导致体验下降orderby=_distancepage_size否每页条目数，最大限制为20条，默认为10条page_size=10page_index否第x页，默认第1页page_index=2output否返回格式： 支持JSON/JSONP，默认JSONoutput=jsoncallback否JSONP方式回调函数callback=function1响应结果名称类型必填说明 statusnumber是状态码，0为正常，其它为异常，详细请参阅状态码说明 messagestring是状态说明 countnumber是本次搜索结果总数，另外本服务限制最多返回200条数据(data)， 翻页（page_index）超过搜索结果总数 或 最大200条限制时，将返回最后一页数据。 request_idstring是本次请求的唯一标识，由系统自动生成，用于追查结果有异常时使用 dataarray是搜索结果POI（地点）数组，每项为一个POI（地点）对象 idstring是POI（地点）唯一标识 titlestring是POI（地点）名称 addressstring是地址 telstring是电话 categorystring是POI（地点）分类 typenumber是POI类型，值说明：0:普通POI / 1:公交车站 / 2:地铁站 / 3:公交线路 / 4:行政区划 locationobject是坐标 latnumber是纬度 lngnumber是经度 _distancenumber是距离，单位： 米，在周边搜索、城市范围搜索传入定位点时返回 ad_infoobject是行政区划信息 adcodenumber是行政区划代码，详见：行政区划代码说明 provincestring是省 citystring是市，如果当前城市为省直辖县级区划，此字段会返回为空，由district字段返回。 注：省直辖县级区划adcode第3和第4位分别为9、0，如济源市adcode为419001 districtstring是区sub_poisarray否子地点列表，仅在输入参数get_subpois=1时返回 parent_idstring是主地点ID，对应data中的地点IDidstring是地点唯一标识 titlestring是地点名称 telstring是电话 categorystring是POI（地点）分类 typenumber是POI类型，值说明：0:普通POI / 1:公交车站 / 2:地铁站 / 3:公交线路 / 4:行政区划 addressstring是地址 locationobject是坐标 latnumber是纬度lngnumber是经度 ad_infoobject是行政区划信息 adcodenumber是行政区划代码，详见：行政区划代码说明 provincestring是省 citystring是市，如果当前城市为省直辖县级区划，此字段会返回为空，由district字段返回。 注：省直辖县级区划adcode第3和第4位分别为9、0，如济源市adcode为419001 districtstring是区四、使用腾讯地图一些问题目前切换到腾讯地图之后遇到的一些问题不能显示加油站或充电站图片，百度地图是有个参数photo_show，如果photo_show开启，会提示授权失败。具体原因不清楚，没搜到，但是腾讯地图是直接就没有这个参数。并发确实少点。
