油耗笔记OilNote经过两轮迭代，将地图服务由高德地图切换到百度地图，最终定格到了腾讯地图。
在前面，我们已经实现了逆地址解析及周边搜索功能。
接下来我们要实现打开地图，在图直接选择加油站功能。
我们使用腾讯地图提供的微信小程序JavaScript SDK实现在线地图功能。
一、微信小程序JavaScript SDK介绍
腾讯位置服务为微信小程序提供了基础的标点能力、线和圆的绘制接口等地图组件和位置展示、地图选点等地图API位置服务能力支持，使得开发者可以自由地实现自己的微信小程序产品。 在此基础上，腾讯位置服务微信小程序JavaScript SDK是专为小程序开发者提供的LBS数据服务工具包，可以在小程序中调用腾讯位置服务的POI检索、关键词输入提示、地址解析、逆地址解析、行政区划和距离计算等数据服务，让您的小程序更强大！
二、微信小程序JavaScript SDK使用
2.1、小程序域名设置
在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名，添加https://apis.map.qq.com
2.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 ~ 90
- longitude，经度，类型Number，必填项，浮点数，范围 -180 ~ 180
- title，标注点名，类型String，不是必填，点击时显示，callout存在时将被忽略
- iconPath，显示的图标，类型String，必填项，项目目录下的图片路径
- rotate，旋转角度，类型Number，不是必填，顺时针旋转的角度，范围 0 ~ 360，默认为 0
- alpha，标注的透明度，类型Number，不是必填，默认1，无透明，范围 0 ~ 1
- width，标注图标宽度，类型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，文本，String
- color，文本颜色，String
- fontSize，文字大小，Number
- borderRadius，callout边框圆角，Number
- bgColor，背景色，String
- padding，文本边缘留白，Number
- display，'BYCLICK':点击显示; 'ALWAYS':常显，String
- textAlign，文本对齐方式。有效值: left, right, center，String
marker上的标签label（Object类型）
- content，文本，String
- color，文本颜色，String
- fontSize，文字大小，Number
- x，label的坐标，原点是 marker 对应的经纬度，Number
- y，label的坐标，原点是 marker 对应的经纬度，Number
- borderWidth，边框宽度，Number
- borderColor，边框颜色，String
- borderRadius，边框圆角，Number
- bgColor，背景色，String
- padding，文本边缘留白，Number
- textAlign，文本对齐方式。有效值: left, right, center，String
2.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-表示在地图渲染更新完成时触发
评论 (0)