搜索到
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-表示在地图渲染更新完成时触发 -
爱车记-Harmony OS Next第一款纯电车电耗统计与计算软件 介绍爱车记是Harmony OS Next上第一款专为电动汽车用户设计的智能充电管理工具，旨在帮助用户轻松记录、管理和分析充电数据及费用。主要功能爱车记致力于为纯电车车主提供服务，目前提供的主要功能包括：充电数据记录，形成完整的充电历史档案。用户每次充电后只需要记录充电的数据，系统形成完整的充电历史档案。通过用户记录的充电数据，协助用户统计电车的电耗、行李里程、累计电费、平均电费等信息。费用计算与管理。支持记录每笔发生的费用。比如洗车或者购买保险等。支持根据不同的费用类型，统计费用发生的合计。集成地图服务，提供附近可用充电站的位置信息，并支持路线规划。支持充电桩查询，可以方便查询附近充电桩信息并可一键导航。支持提醒支持设置提醒功能，比如购买保险提醒等，用户定义的提醒内容，会以系统消息的形式发送给用户进行提醒。支持多车辆管理支持多车辆管理，用户可以无限制免费添加车辆。其他功能用户可以下载爱车记，体验其他功能。
