uniapp 使用高德地图 做的一些demo (大杂烩)

最新推荐文章于 2024-04-12 20:48:05 发布
最新推荐文章于 2024-04-12 20:48:05 发布
阅读量714 收藏 3
点赞数
分类专栏： 前端 文章标签： uni-app Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31683775/article/details/129128600
版权

uniapp 使用高德地图 做的一些demo (大杂烩)

vue文件

<template>
    <div>
        <div id="container" style="width: 100%; height: 300px;"></div>
        <div id="panel"></div>
        <button @click="Polyline">点击测试</button>
        <button @click="graspRoad1">轨迹纠偏</button>
        <button @click="polyEditorStart">录入路线开始</button>
        <button @click="polyEditorEnd">录入路线结束</button>
        <button @click="drivingSearch">搜索路线</button>
        <button @click="polyEditorStart2">录入路线开始2</button>
        <button @click="polyEditorEnd2">录入路线结束2</button>
    </div>
</template>

<script>
    import AMapLoader from '@amap/amap-jsapi-loader';
    window._AMapSecurityConfig = {
      securityJsCode: ''
    }
    export default {
        data() {
            return {
                map: null,
                AMap:null,
                graspRoad:null,
                polylineEditor:null,
                center:[112.5226,32.985824],
                initial:[[112.5226,32.985824],[112.5226+0.02,32.985824+0.02]],
                manual:[
                    
                ],
                automatic:[
                    
                ],
                spotList:[],
                markerList:[]
            }
        },
        mounted(){
            this.init();
        },
        methods: {
            init(){
                AMapLoader.load({
                    "key": "",              // 申请好的Web端开发者Key，首次调用 load 时必填
                    "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                    "plugins": ["AMap.GraspRoad","AMap.PolyEditor","AMap.Driving","AMap.DrivingPolicy","AMap.Marker","AMap.LngLat"],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                }).then((AMap)=>{
                    this.map = new AMap.Map('container',{
                        zoom:10,
                        center:[...this.center]
                    });
                    this.AMap = AMap;
                }).catch(e => {
                    console.log(e);
                })
                
            },
            Polyline(){
                var pathParam = [
                    {"x":116.478928,"y":39.997761,"sp":19,"ag":0, "tm":1478031031},
                    {"x":116.478907,"y":39.998422,"sp":10,"ag":0, "tm":2},
                    {"x":116.479384,"y":39.998546,"sp":10,"ag":110,"tm":3},
                    {"x":116.481053,"y":39.998204,"sp":10,"ag":120,"tm":4},
                    {"x":116.481793,"y":39.997868,"sp":10,"ag":120,"tm":5},
                    {"x":116.482898,"y":39.998217,"sp":10,"ag":30, "tm":6},
                    {"x":116.483789,"y":39.999063,"sp":10,"ag":30, "tm":7},
                    {"x":116.484674,"y":39.999844,"sp":10,"ag":30, "tm":8}]

                var path1 = [];
                for(var i=0;i<pathParam.length;i+=1){
                  path1.push([pathParam[i].x,pathParam[i].y])
                }
                
                
                var path2 =[[116.379742,39.865566],[116.380475,39.864787],[116.380475,39.864787],[116.381129,39.864798],[116.381129,39.864798],[116.387448,39.865125],[116.38762,39.865227],[116.387958,39.870554],[116.387958,39.870554],[116.39609,39.871369],[116.39609,39.871369],[116.444134,39.895144],[116.444134,39.895144],[116.440283,39.899366],[116.440283,39.899366],[116.419667,39.901158],[116.419667,39.901158],[116.420724,39.901791],[116.420724,39.901791],[116.427065,39.904977],[116.427236,39.904923],[116.428905,39.904907],[116.428905,39.904907],[116.428942,39.903293],[116.428942,39.903293],[116.427298,39.903233]];
                
                let AMap = this.AMap;
                var oldLine = new AMap.Polyline({
                  path:path2,
                  strokeWeight:8,
                  strokeOpacity:1,
                  strokeColor:'red'
                })
                oldLine.setMap(this.map);
            },
            graspRoad1(){
                var pathParam = [
                        {"x":116.478928,"y":39.997761,"sp":0,"ag":0, "tm":1478031031},
                        {"x":116.478907,"y":39.998422,"sp":0,"ag":0, "tm":2},
                        {"x":116.479384,"y":39.998546,"sp":0,"ag":0,"tm":3},
                        {"x":116.481053,"y":39.998204,"sp":0,"ag":0,"tm":4},
                        {"x":116.481793,"y":39.997868,"sp":0,"ag":0,"tm":5},
                        {"x":116.482898,"y":39.998217,"sp":0,"ag":0, "tm":6},
                        {"x":116.483789,"y":39.999063,"sp":0,"ag":0, "tm":7},
                        {"x":116.484674,"y":39.999844,"sp":0,"ag":0, "tm":8}]
                let AMap = this.AMap;
                var thih = this;
                this.graspRoad = new AMap.GraspRoad()
                this.graspRoad.driving(pathParam,function(error,result){
                  if(!error){
                    var path2 = [];
                    var newPath = result.data.points;
                    for(var i =0;i<newPath.length;i+=1){
                      path2.push([newPath[i].x,newPath[i].y])
                    }

                    var newLine = new AMap.Polyline({
                      path:path2,
                      strokeWeight:8,
                      strokeOpacity:0.8,
                      strokeColor:'#0091ea',
                      showDir:true
                    })
                    newLine.setMap(thih.map);
                  }
                })
            },
            polyEditorStart(){
                let AMap = this.AMap;
                var thih = this;
                var polyline = new AMap.Polyline({
                  path:thih.initial,
                  isOutline: true,
                  outlineColor: '#ffeeff',
                  borderWeight: 3,
                  strokeColor: "#3366FF", 
                  strokeOpacity: 1,
                  strokeWeight: 6,
                  // 折线样式还支持 'dashed'
                  strokeStyle: "solid",
                  // strokeStyle是dashed时有效
                  strokeDasharray: [10, 5],
                  lineJoin: 'round',
                  lineCap: 'round',
                  zIndex: 50,
                });
                this.polylineEditor = new AMap.PolyEditor(thih.map,polyline); 
                this.polylineEditor.open();
                this.polylineEditor.on("end", function (event) {
                    let pointArr = event.target.getPath();
                    console.log(pointArr)
                    for(var i=0;i<pointArr.length;i++){
                        if(i==0){
                            thih.manual.push({"x":pointArr[i].getLng(),"y":pointArr[i].getLat(),"sp":1,"ag":100, "tm": 1478031031});
                        }else{
                            thih.manual.push({"x":pointArr[i].getLng(),"y":pointArr[i].getLat(),"sp":1,"ag":100, "tm":i+1});
                        }
                    }
                    console.log(thih.manual)
                    
                    var path1 = [];
                    for(var i=0;i<thih.manual.length;i+=1){
                      path1.push([thih.manual[i].x,thih.manual[i].y])
                    }
                    var oldLine = new AMap.Polyline({
                      path:path1,
                      strokeWeight:8,
                      strokeOpacity:1,
                      strokeColor:'red'
                    })
                    oldLine.setMap(thih.map);
                    
                    
                    var pathParam = [
                            {"x":112.510912,"y":32.977835,"sp":0,"ag":0, "tm":1478031031},
                            {"x":112.505111,"y":32.960961,"sp":0,"ag":0, "tm":2},
                            {"x":112.532081,"y":32.952524,"sp":0,"ag":0,"tm":3},
                            {"x":112.564245,"y":32.950625,"sp":0,"ag":0,"tm":4}
                            
                            
                            ]
                    var pathParam1 = thih.sort(thih.manual);
                    
                    this.graspRoad = new AMap.GraspRoad()
                    this.graspRoad.driving(pathParam1,function(error,result){
                      if(!error){
                        var path2 = [];
                        var newPath = result.data.points;
                        for(var i =0;i<newPath.length;i+=1){
                          path2.push([newPath[i].x,newPath[i].y])
                        }
                    
                        var newLine = new AMap.Polyline({
                          path:path2,
                          strokeWeight:8,
                          strokeOpacity:0.8,
                          strokeColor:'#0091ea',
                          showDir:true
                        })
                        newLine.setMap(thih.map);
                      }
                    })
                });
                
                /* var thih = this;
                var polyline = new AMap.Polyline({
                  map: thih.map,
                  path:thih.initial,
                  strokeWeight:8,
                  strokeOpacity:0.8,
                  strokeColor:'#0091ea',
                  showDir:true
                });
                this.editorObj = new AMap.PolylineEditor(thih.map,polyline)
                this.editorObj.setTarget(this.flowRiver)
                this.editorObj.open() */
            },
            polyEditorEnd(){
                this.polylineEditor.close();
                
                /* this.editorObj.close()
                console.log(this.flowRiver)*/
            },
            drivingSearch(){
                let AMap = this.AMap;
                var thih = this;
                var drivingOption = {
                    policy: AMap.DrivingPolicy.LEAST_TIME, // 其它policy参数请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingPolicy
                    ferry: 1, // 是否可以使用轮渡
                    province: '京', // 车牌省份的汉字缩写 
                    map: thih.map,
                    panel: 'panel'
                }
                 // 构造路线导航类
                 var driving = new AMap.Driving(drivingOption)
                 // 根据起终点经纬度规划驾车导航路线
                 driving.search(new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719), function(status, result) {
                     // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
                     if (status === 'complete') {
                         var steps= result.routes[0].steps;
                         var dian=[];
                         for(var i =0;i<steps.length;i++){
                             var yijie=steps[i].path;
                             /* for(var j =0;j<yijie.length;j++){
                                 var path=yijie[j];
                                 dian.push([path.getLng(),path.getLat()]);
                             } */
                             dian.push([yijie[0].getLng(),yijie[0].getLat()]);
                             dian.push([yijie[yijie.length-1].getLng(),yijie[yijie.length-1].getLat()]);
                         }
                       console.log(result)
                       console.log(JSON.stringify(dian))
                     } else {
                         log.error('获取驾车数据失败：' + result)
                     }
                 });
            },
            sort(data){
                //alert(data);
                var x=[];
                for (var i=0;i<data.length;i++) {
                    x.push(data[i]["x"]);
                }
                x.sort();
                
                var rdate=[];
                for (var i=0;i<x.length;i++) {
                    var xx=x[i];
                    for (var j=0;j<data.length;j++) {
                        if(data[j]["x"] ==xx ){
                            if(i==0){
                                data[j]['tm']=new Date().getTime();
                            }else{
                                data[j]['tm'] = i;
                            }
                            rdate.push(data[j]);
                            break;
                        }
                    }
                }
                console.log(JSON.stringify(rdate))
                return rdate;
            },
            polyEditorStart2(){
                var thih = this;
                this.map.on('click', function(ev) {
                  var lnglat = ev.lnglat;
                  console.log(JSON.stringify(lnglat))
                  thih.spotList.push([lnglat.getLng(),lnglat.getLat()]);
                  var marker = new AMap.Marker({
                      position: [lnglat.getLng(),lnglat.getLat()],   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                      title: "无效"
                  });
                  marker.setExtData({num:thih.spotList.length});
                  marker.setContent(thih.spotList.length);
                  marker.setMap(thih.map);
                  
                  marker.on('click', function(ev) {
                      //获取点击的点标记是几
                      var num=ev.target.getExtData().num;
                      //删除几以后的点,重新选择路线
                      var data=[];
                      var data1=[];
                      for (var i=0;i<thih.spotList.length;i++) {
                          //只保留逻辑未删除的
                          if(i < num-1){
                              data.push(thih.spotList[i]);
                              data1.push(thih.markerList[i]);
                          }else{
                              thih.markerList[i].remove(thih.map);
                          }
                      }
                      thih.spotList = data;
                      thih.markerList = data1;
                  });
                  
                  thih.markerList.push(marker);
                });
            
            },
            polyEditorEnd2(){
                var thih = this;
                var data=this.spotList;
                let AMap = this.AMap;
                var oldLine = new AMap.Polyline({
                  path:data,
                  strokeWeight:8,
                  strokeOpacity:1,
                  strokeColor:'red'
                })
                oldLine.setMap(this.map);
                
                var data1=[];
                for(var i=0;i<data.length;i++){
                    if(i==0){
                        data1.push({"x":data[i][0],"y":data[i][1],"sp":10,"ag":90, "tm": new Date().getTime()});
                    }else{
                        data1.push({"x":data[i][0],"y":data[i][1],"sp":10,"ag":90, "tm":i+1});
                    }
                }
                console.log(JSON.stringify(data1))
                
                var path2=this.graspRoad2(data1);
                
                
                
            },
             graspRoad2(pdata){
                 var thih = this;
                let AMap = this.AMap;
                this.graspRoad = new AMap.GraspRoad()
                this.graspRoad.driving(pdata,function(error,result){
                  if(!error){
                    var path2 = [];
                    var newPath = result.data.points;
                    for(var i =0;i<newPath.length;i+=1){
                      path2.push([newPath[i].x,newPath[i].y])
                    }
                    //return path2;
                    console.log(JSON.stringify(path2))
                    var newLine = new AMap.Polyline({
                      path:path2,
                      strokeWeight:8,
                      strokeOpacity:0.8,
                      strokeColor:'#0091ea',
                      showDir:true
                    })
                    newLine.setMap(thih.map);
                  }
                })
            }
        }
    }
</script>

<style>

</style>
qq_31683775
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端vue如何使用高德地图
01-18
首先，注册Key 　1、注册开发者账号，成为高德开放平台开发者     2、登陆之后，在进入「应用管理」 页面「创建新应用」 　3、为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」 然后，书写代码    在vuecli  public文件夹中的index.html添加导入 JS API 的入口脚本标签 <!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta http-equiv=X-UA-Compatible content=IE=edge> <meta na
uniapp 根据定位实现地图绘制轨迹
qq_47255575的博客
11-14 3817
uniapp 地图绘制线和标记点
记录下uniapp开发结合webview调用高德地图（路线规划，多路选择，双向通信）_uniapp 打车
最新发布
m0_60388117的博客
04-12 925
本人从事网路安全工作12年，曾在2个大厂工作过，安全服务、售后服务、售前、攻防比赛、安全讲师、销售经理等职位都做过，对这个行业了解比较全面。最近遍览了各种网络安全类的文章，内容参差不齐，其中不伐有大佬倾力教学，也有各种不良机构浑水摸鱼，在收到几条私信，发现大家对一套完整的系统的网络安全从学习路线到学习资料，甚至是工具有着不小的需求。最后，我将这部分内容融会贯通成了一套282G的网络安全资料包，所有类目条理清晰，知识点层层递进，需要的小伙伴可以点击下方小卡片领取哦！
关于uniapp 中的高德地图路线规划
weixin_47559326的博客
06-11 2355
uniapp 使用高德地图小程序API 1.需要将小程序js相关文件复制到项目中(amap-wx.js) 2. 修改amap-wx.js 文件 amap-wx.js 不适用于app开发 将文件名及内部代码修改，否则报错！！！ 3.相关页面引入和创建地图 引入部分 import amapFile from '../../utils/amap-uni.js' html部分 <map v-if="isShow" style="width: 100vw;height: 1000rpx;z-index:
uniapp 打开微信内置地图实现导航/打车
Wang_MengHan的博客
02-25 497
uniapp 打开微信内置地图实现导航/打车。
uniapp使用高德定位
俗人
07-06 1357
1.注册账号并申请Key 首先，注册开发者账号，成为高德开放平台开发者 登陆之后，在进入「应用管理」 页面「创建新应用」 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」 2.准备页面 先建个js文件，加载jsAPI export default function MapLoader() { return new Promise((resolve, reject) => { if (window.AMap) { resolve(w
uniapp+vue中使用高德地图
pleasantsheep_的博客
08-24 5121
提示：由于使用的是uniapp，所以没有用使用Android的SDK进行开发，但用到这个的key来进行做定位等uni方面的操作。提示：以下是本篇文章正文内容，下面案例可供参考在这里，uniapp里面使用高德地图就差不多了，剩下的就看官网api就好了。本文仅仅简单介绍了renderjs的传参使用，你们把这个当作js使用就可以了，只是uni.的一些内置方法在里面不管用，得在传统的 里面去使用，然后把参数获取方法传到renderjs里面就行了。
高德地图demo，实现点位及路径规划
qq_44121023的博客
05-26 924
高德地图单击定位，路线规划
uniapp使用高德地图
热门推荐
qwe_aaaaa的博客
07-26 1万+
uniapp高德地图使用，单点和路线规划。
uniapp---app端，使用高德地图绘制轨迹
biubiubiutong的博客
05-08 8104
uniapp打包app，使用高德地图绘制轨迹，实现驾车路径的规划 uniapp自身提供地图组件，但由于兼容性比较差，很多功能无法基于uni提供的api实现自己的需求点，所以这里我们借助web-view的方式去实现路线的规划，以及高德地图的方法调用， 这里的例子只实现了驾车路径的规划 由于本次用的是renderjs这个插入模版，所以要用两个script块，并且用:prop用于传递数据参数，:change:prop用于监听数据变化 <template> <view class=".
uniapp H5端使用高德地图完成路线规划
sunluyi的博客
09-01 1万+
首先到高德地图API，申请web端key 参考高德H5端教程开始写代码高德地图JS API 1、准备工作，会提示你先引入下边这块代码 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> 我的项目是uniapp项目，在自定义的html引入会报错，个人感觉可能是加载顺序的问题，最后修改成 import maps from '.
高德地图demo
03-07
高德地图导航demo基础高德地图的功能，导航、搜索、地图上选址，模拟轨迹、地图上画线等等
在uniapp做高德地图，发布为h5网页
11-14
在uniapp做高德地图，发布为h5网页，内嵌入安卓app中，代码摘要，不含敏感信息在uniapp做高德地图，发布为h5网页，内嵌入安卓app中，代码摘要，不含敏感信息
高德地图api离线化，支持uniapp，web，触屏操作
04-25
高德api离线化，支持uniapp，web，触屏操作 根据高德api JS文件进行离线化操作
高德地图风场效果demo源代码
10-29
源代码提供高德地图风场效果，下载解压后，本地启动静态服务，即可看风场特效；本demo地图地图是基于高德地图，同时支持百度地图、天地图等作为底图
高德地图web多边形电子围栏demo
06-09
高德web端实现多边形电子围栏demo 地图上点三个点形成多边形区域，可以通过拉拽添加点的形式添加边的数量 可判断marker是否在多边形区域区域内（jQuery需要自己添加）
uniapp 地图行车轨迹
weixin_44167504的博客
02-29 771
id: number-必填,latitude: '纬度',longitude: '经度',callout:{},// '自定义标记点上方的气泡窗口'- 纯文本内容 - content 显示标记内容customCallout:{},// '自定义气泡窗口' - 自定义窗口内容 - 使用cover-view覆盖uniapp map自定义气泡窗。
uniapp开发的App中使用高德地图
m0_57442975的博客
09-28 7930
map地图在不同的开发场景使用不同，这里主要是uniapp开发的Android软件中关于高德地图使用的一些项目记录。
uniapp使用高德JS API
YiYeZhiQiuDe_yzq的博客
12-19 4649
​ 1、申请key的时候勾选Web端（JS API） 2、如果要适配手机端，加载JS API时通过renderjs加载。 3、加载的API应当是2.0版本，低于2.0会有定位不准的情况。 4、renderjs在H5中视图层和逻辑层其实都是运行在同一个环境中所以会很顺利，但是在手机端逻辑层无法直接访问视图层的数据。可以通过监听逻辑层的属性改变来实现事件。 5、tenderjs用法示例。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值