更新记录

1.0.0（2026-03-27） 下载此版本

首次更新

平台兼容性

uni-app

y-mapservice

uni-app 引入 js即可使用，支持 android 、ios 和 h5

使用介绍

1. 使用 HBuilderx 导入sdk，在相关文件中引入，示例代码：

<template>
    <view class="container">
        <map id="map" :latitude="latitude" :longitude="longitude" :markers="markers" :polyline="polyline"
            :style="{width: '100%',height: '100vh'}">
        </map>
    </view>
</template>

<script>
    import { calculateDrivingRoute } from '@/js_sdk/y-mapservice/mapservice.js';
    export default {
        data() {
            return {
                latitude: 39.908823, // 默认纬度（北京）
                longitude: 116.397470, // 默认经度
                //地图
                mapContext: undefined,
                mapPlus: undefined,
                //标记
                markers: [],
                //路线
                polyline: [],
                //起点
                startLon: 0,
                startLat: 0,
                //终点
                endLon: 0,
                endLat: 0
            }
        },
        onLoad(opt) {
            // 可根据自己需求获取，接口获取/定位获取
            this.startLon = opt.startLon;
            this.startLat = opt.startLat;
            this.endLon = opt.endLon;
            this.endLat = opt.endLat;
        },
        onReady() {
            this.mapContext = uni.createMapContext("map", this);
            this.mapPlus = this.mapContext.$getAppMap();
            this.refreshMap();
        },
        methods: {
            refreshMap() {
                // 定位到地图中间位置
                this.mapContext.moveToLocation({
                    latitude: this.startLat,
                    longitude: this.startLon
                });
                // 添加标记
                this.markers = [{
                        id: 0,
                        latitude: this.startLat,
                        longitude: this.startLon,
                        iconPath: '/static/index/map-ta.png', // 标记图标
                    },
                    {
                        id: 1,
                        latitude: this.endLat,
                        longitude: this.endLon,
                        iconPath: '/static/index/map-wo.png', // 标记图标
                    }
                ];

                // 计算并显示路线
                this.calculateRoute();
            },
            async calculateRoute(){
                try {
                    console.log('开始计算路线');
                    //填写高德开发者申请的《web服务》的 key
                    const apiKey = '';
                    const path = await calculateDrivingRoute(
                        apiKey,
                        parseFloat(this.startLon),
                        parseFloat(this.startLat),
                        parseFloat(this.endLon),
                        parseFloat(this.endLat),
                    );
                    // 设置路线
                    this.polyline = [{
                        points: path,
                        color: '#4dbe7c',
                        width: 10,
                        arrowLine: true
                    }];
                    console.log('路线已设置到地图');
                } catch (error) {
                    console.error('路线计算失败:', error);
                    // 失败时不显示路线
                    this.polyline = [];
                }
            }
        },
    }
</script>

2. mapservice.js 参数说明