Technology Sharing

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

UNIAPP Use maps Baidu Amap Tencent map route track

Link: Plugins.

The route track first needs to apply for the key value of the developer center

Plugins must be imported

Copy the following code and replace the KEY value

After applying for the key value, you only need to pass the starting and ending longitude and latitude**

<template>
    <view>
        <view class="uni-common-mt">
            <view>
                <map :latitude="latitude" :longitude="longitude" :markers="markers" :polyline="polyline" :scale="scale">

                </map>
            </view>
        </view>
    </view>
</template>

<script>
    import route from '@/js_sdk/heimao-map/heimaodinwei-map/heimao-map.js'
    export default {
        data() {
            return {
                latitude: 30.923396,
                longitude: 121.478823,
                markers: [],
                polyline: [],
                scale: 15
            }
        },
        methods: {
        },
        onLoad() {
            // 这里填自己的高德地图应用中key 没有的话自己注册一个
            route.setKey("高德的key值");
            // 这里填自己的百度地图应用中key 没有的话自己注册一个
            // route.setKey("百度地图的key值");
            const origin ={
                latitude: 30.923396,
                longitude: 121.478823,
                //起点的icon
                iconPath: '../../static/qd.png',
            };
            const destination = {
                latitude: 30.925396,
                longitude: 121.678823,
                //终点的icon
                iconPath: '../../static/zd.png',
            };

            route.drawRoute(this,origin,destination);

        }
    }
</script>
<style>
    map {
        width: 100%;
        height: 100vh;
    }
    .cover{
        display: flex;
        text-align: center;
        background: #999;
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60