UNIAPP 使用地图 百度 高德 腾讯地图路线轨迹

UNIAPP 使用地图 百度 高德 腾讯地图路线轨迹

链接: 插件.

路线轨迹首先需要申请开发者中心 的key值

必须导入插件

复制下面代码 替换KEY值

申请key值以后 只需要传开始和结束的经度纬度即可**

<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. UNIAPP 使用地图 地图路线轨迹

    2024-07-12 03:12:03       20 阅读
  2. uniapp地图路线规划

    2024-07-12 03:12:03       51 阅读
  3. vue+地图

    2024-07-12 03:12:03       57 阅读
  4. uniapp使用地图标点

    2024-07-12 03:12:03       44 阅读
  5. uniapp使用地图获取地址信息

    2024-07-12 03:12:03       32 阅读
  6. 微信小程序地图定位转地图定位

    2024-07-12 03:12:03       40 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-12 03:12:03       50 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-12 03:12:03       54 阅读
  3. 在Django里面运行非项目文件

    2024-07-12 03:12:03       43 阅读
  4. Python语言-面向对象

    2024-07-12 03:12:03       54 阅读

热门阅读

  1. 理解李彦宏的“不卷模型,卷应用”理念

    2024-07-12 03:12:03       17 阅读
  2. 关于windows下编译xLua插件的流程记录

    2024-07-12 03:12:03       20 阅读
  3. 从零开始学习嵌入式----Makefile工具

    2024-07-12 03:12:03       16 阅读
  4. SpringBoot 定时任务之@Scheduled cron表达式

    2024-07-12 03:12:03       14 阅读
  5. C/C++开发,IniFile源码下载

    2024-07-12 03:12:03       17 阅读
  6. jQuery Mobile 安装指南

    2024-07-12 03:12:03       21 阅读
  7. centos ssh一键升级到9.8版本脚本

    2024-07-12 03:12:03       18 阅读
  8. Kotlin 中 is 关键字的作用与智能类型转换

    2024-07-12 03:12:03       20 阅读
  9. Promise

    2024-07-12 03:12:03       13 阅读