一、微信小程序JavaScript SDK介绍

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

微信小程序JavaScript SDK开发文档

二、微信小程序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>