记录下uniapp开发结合webview调用高德地图(路线规划,多路选择,双向通信)

这篇具有很好参考价值的文章主要介绍了记录下uniapp开发结合webview调用高德地图(路线规划,多路选择,双向通信)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

uniapp结合webview实现(微信和app上)简单版导航打车应用,总体实现方案是 在uniapp上嵌入web网页,在web网页上调用高德地图api实现渲染地图及路线文章来源地址https://www.toymoban.com/news/detail-825518.html

1. 前置准备工作

  1. 去高德开放平台注册账号并创建web应用,再生成web安全密钥和key
  2. 如果需要运行到微信上则需要开通微信公众平台上应用需要的定位权限(有啥开通啥),如果需要发版不是本地运行的demo的话足以,否则还要将网站升级成https,备案,开通443端口,将这个网站网址添加到微信公众上那个业务域名里(根据提示将校验文件放在根目录下即可添加),不然线上访问不通(微信安全限制了的没办法)。

2.web端开发

  1. web vue项目引入这个"@amap/amap-jsapi-loader": "^1.0.1"插件,
  2. 在你页面js中先挂载window上这个安全密钥
    window._AMapSecurityConfig = { securityJsCode: '生成的安全密钥', }
  3. 初始化地图:
     async initMap() {
       try {
         this.AMap = await this.AMapLoader.load({
           key: "你生成到的key",             
           version:"2.0",     
           plugins:[],
           // resizeEnable: true
           dragEnable: true,
         })
         this.mapInstance = await new this.AMap.Map("mapContainer",{  //设置地图容器id
           viewMode:"3D", //是否为3D地图模式
           zoom: 15, // 缩放级别
           pitch: 0, // 俯视角度
           center: new this.AMap.LngLat(this.myLocation.longitude,this.myLocation.latitude), //初始化地图中心点位置
         });
         // 画用自定义点
         this.selfMarker = await new this.AMap.Marker({
           map: this.mapInstance,
           position: [this.preLocation.longitude, this.preLocation.latitude],
           content: this.$refs.selfMarkerRef,  // 自定义地图锚点dom
           anchor: new this.AMap.Pixel(0,0),
           offset: new this.AMap.Pixel(-20,-20),
           size: new this.AMap.Size(20, 20)
         });
         // 自己走过的线(先定义)
         this.passedPolylineInstance =  new this.AMap.Polyline({
           map: this.mapInstance,
           strokeColor: "#b6bcb2",  //线颜色
           strokeWeight: 6,      //线宽
         });
         Promise.all([this.AMap,this.mapInstance,this.selfMarker,this.passedPolylineInstance]).then(res=>{
           this.getPositionByAmap()
           // 路线规划
           this.routePlan()
         })
       } catch (err) {

       }
      },
  1. 高德获取定位信息
	// 获取定位
      getPositionByAmap() {
        if(this.AMap) {
          this.AMap.plugin('AMap.Geolocation',  () => {
           let geolocation = new this.AMap.Geolocation({
              // enableHighAccuracy: true,//是否使用高精度定位,默认:true
              noIpLocate: 3,           // 禁止ip定位
              maximumAge: 300,           //定位结果缓存0毫秒,默认:0
              convert: true,           //自动偏移坐标,偏移后的坐标为高德坐标,默认:true
              showButton: false,        //显示定位按钮,默认:true
              showMarker: false,        //定位成功后在定位到的位置显示点标记,默认:true
              showCircle: false,        //定位成功后用圆圈表示定位精度范围,默认:true
              panToLocation: false,     //定位成功后将定位到的位置作为地图中心点,默认:true
              zoomToAccuracy:false      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
            });
           if(positionTimer) {
             clearInterval(positionTimer)
           }
            positionTimer = setInterval(()=>{
              geolocation.getCurrentPosition((status,result) =>{
                if(status === 'complete') {
                  this.myLocation.longitude = result.position.lng
                  this.myLocation.latitude = result.position.lat
                  if(this.selfMarker) {
                    this.selfMarker.setPosition([this.myLocation.longitude, this.myLocation.latitude])
                  }
                }
              });
            },1000)
          });
        }
      }
      
      // 获取当前城市adcode行政编码
      this.cityInfo  =  await new Promise((resolve,reject)=>{
            this.AMap.plugin('AMap.Geocoder', () => {
                new this.AMap.Geocoder({ city: '',radius: 1000 }).getAddress([this.fromAppInfo.fromLongitude, this.fromAppInfo.fromLatitude],
                  (status, result) => {
                  if (status === 'complete' && result.regeocode) {

                    let address = result.regeocode.addressComponent;
                    address.adcode = adcodeDeal.dealAdCode(address.adcode)
                    // 直辖市去除
                    resolve(address)
                  }else{
                    resolve({adcode: null})
                  }
                });
            })
          })
  1. 绘制路线
// 规划绘制路线
      drawRoute(planingRoutes) {
        // 解析线路
        const parseRouteToPath = (route) => {
          let path = []
          let continuityPath = []
          for (let i = 0, l = route.steps.length; i < l; i++) {
            let step = route.steps[i]
            const arrayOfCoordinates = step.polyline.split(";").map(coord => coord.split(","));
            path.push(arrayOfCoordinates.flat())
          }
          path = path.flat()

          for(let i=0;i < path.length -1;i++) {
            continuityPath.push([Number(path[i]),Number(path[i+1])])
            i++
          }
          return continuityPath
        }
        planingRoutes.forEach(itemRoute=>{
          this.routeLines.push(parseRouteToPath(itemRoute))
        })
        // 开始图标
        this.startMarker = new this.AMap.Marker({
          position: [this.routeLines[0][0][0],this.routeLines[0][0][1]],
          // icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',
          map: this.mapInstance,
          content: this.$refs.startMarkerRef,
          // offset: new this.AMap.Pixel(-80, -40),
          anchor: new this.AMap.Pixel(0,0),
          offset: new this.AMap.Pixel(-80,-50),
          size: new this.AMap.Size(100, 100)
        })
        // 结束图标
        this.endMarker = new this.AMap.Marker({
          position: [this.routeLines[0][this.routeLines[0].length-1][0],this.routeLines[0][this.routeLines[0].length-1][1]],
          // icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
          map: this.mapInstance,
          content: this.$refs.endMarkerRef,
          // offset: new this.AMap.Pixel(-80, -40),
          anchor: new this.AMap.Pixel(0,0),
          offset: new this.AMap.Pixel(-80,-50),
          size: new this.AMap.Size(100, 100)
        })
        // 画线
        this.routeLinesInstance = []
        this.routeLines.forEach((path,index)=>{
          let polyline = new this.AMap.Polyline({
            path: path,
            isOutline: true,
            outlineColor: '#366d33',
            borderWeight: index === 0 ? 2 : 1,
            strokeWeight: index === 0 ? 5: 4,
            showDir: true,
            strokeOpacity: index === 0 ? 0.9 : 0.3,
            strokeColor: index === 0 ? '#45ed45' : '#30aa30',
            lineJoin: 'round',
            extData: {
              isSelect: index === 0,
              index: index
            }
          })
          polyline.hide()
          this.routeLinesInstance.push(polyline)
          this.mapInstance.add(polyline);
        })
        // 注册事件 实现点击切换线路
        this.routeLinesInstance.forEach((polyline,index)=>{
          polyline.on('click', (e) => {
            polyline.setOptions({
              borderWeight: 2,
              strokeWeight: 5,
              strokeOpacity: 0.9,
              strokeColor: '#45ed45',
              extData: {
                isSelect: true,
                index: index
              }
            })

            let otherPath= this.routeLinesInstance.filter((item,ind) =>ind !== index)
            otherPath.forEach(item=>{
              item.setOptions({
                borderWeight: 1,
                strokeWeight: 4,
                strokeOpacity: 0.3,
                strokeColor: '#30aa30',
                extData: {
                  isSelect: false,
                  index: item.getExtData().index,
                }
              })
            })
            // 变更路线
            this.$eventBus.$emit('changeRouteLine')
            // 调整视野达到最佳显示区域
            this.mapInstance.setFitView([ this.startMarker, this.endMarker, ...this.routeLinesInstance ], false, [70,260,60,60])
          })
        })
        this.routeLinesInstance[0].show()
        this.startMarker.show()
        this.endMarker.show()
      },

3. uniapp端开发

  1. 在manifest.json将这些定位权限开启,还要将key填写到App模块配置里的高德key里
    uniapp 打车,uni-app,微信小程序,webview,web app
  2. 在nvue中创建webview(nvue对webview层级问题和双向通信友好)
<template>
	<view>
		<web-view
		 :src="src" 
		 :style="[{ height: `${webHeight}px`,width: '750rpx'}]"
		 ref="webviewRef"
		 @onPostMessage="getMessageFromWeb" />
	</view>
</template>

// webHeight =  uni.getSystemInfoSync().windowHeight

3. uniapp与webview双向通信(微信小程序与app略有不同)

App中:app与webview双向通信

 // app 向 web发送消息
 
 1. 通过src路径 拼接params参数传递
 // app上发送
 this.src =  href + '?pageInfo=' + encodeURIComponent(JSON.stringify(params))
 // web上接收
 const params = JSON.parse(this.$route.query.pageInfo)

 2. 通过evalJs注册函数在web的windows上调用
 // app向 web发送消息 (注意 需要将web在页面加载好了再调用,以防止报错,或加个延时再调用)
 const params = JSON.stringify({id: '1234',token: 'xxxxxxx'})
 this.$refs.webviewRef.evalJs(`sendMsgFromApp(${params})`)
 // web上接收
 window.sendMsgFromApp(params) {
   console.log(params)
 }
// web 向 app发消息

1. 在web的index.html上引入这个uni插件(注意版本)
<script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script>
2. 这个方法判断下插件是否注册挂载完成
document.addEventListener('UniAppJSBridgeReady', () => { 
  // 挂载好了,可以使用插件中的方法了
  3. 向app发消息
  uni.postMessage({ data: {  message: '这是一段消息' } })
  // uni.navigateTo({url:'xxx'})  // 直接跟uni方法一样
})
3. app中webview上注册的方法 @onPostMessage="getMessageFromWeb" 进行实时接收

微信小程序中:微信小程序与webview双向通信

 // 微信小程序 向 web发送消息
 
 1. 通过src路径 拼接params参数传递 ,这个方法每次调用都会让页面刷新(注意频率)
 // 微信小程序 上发送
 this.src =  href + '?pageInfo=' + encodeURIComponent(JSON.stringify(params))
 // web上接收
 const params = JSON.parse(this.$route.query.pageInfo)
 
 -----> 注意不能使用evalJs调用......
 
// web 向 微信小程序发消息(由于微信小程序没法实时通过webview上onPostMessage方法调用,只能当页面摧毁或隐藏的时候才能调用,所以通过互转路由来获取web传递参数最好)

1. 在web的index.html上引入这个微信的插件(注意版本)
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script>
2. 这个方法判断下插件是否注册挂载完成
document.addEventListener('UniAppJSBridgeReady', () => { 
  // 挂载好了,可以使用插件中的方法了
  3. 只能通过跳转url传参
  uni.navigateTo({
    url: `/pages/pageRedirect?` + `payType=${params}`
  });
})
4.在 pageRedirect页面中接收参数
	onLoad(options) {
		this.webInfo = JSON.parse(decodeURIComponent(JSON.stringify(options)))
		uni.navigateBack({delta:1})
	},
	onUnload() {
		uni.$emit("webPageMsgEvent",this.webInfo);
	}
5.当回到本页面时(写webview的页面中)接收来自pageRedirect的参数
	onShow() {
		uni.$on("webPageMsgEvent", webInfo => {
			// 拿到从web发向微信小程序中的参数
			console.log(webinfo)
		 uni.$off('webPageMsgEvent');
	})

到了这里,关于记录下uniapp开发结合webview调用高德地图(路线规划,多路选择,双向通信)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp开发小程序解析经纬度获取当前位置信息(高德地图三)

    选择了高德地图定位 高德地图官网 小程序步骤如下:      1.首先创建应用       2.点击增添key按钮申请小程序key         3.然后下载它的微信小程序版 SDK:微信小程序 SDK         4.把下载的sdk放在公共的文件里,这里我放在了utils文件目录下          5.使用页面导入此

    2024年02月02日
    浏览(60)
  • 【学习记录】使用高德地图API开发一个简单基础的WebGIS系统(GIS考研院校专题地图网站)

    本人只是一个普普通通的 GIS 学生, 下面是记录我的写的一个作业 demo 的内容, 可能会存在一定的错误, 欢迎在评论区私信交流! *完整功能展示看这里 (B站) *感兴趣可以下载完整 demo 看看 (阿里云盘) 本网站(GIS考研院校可视化专题网站)为2022年GIS考研初期准备择校的学生服务

    2024年02月13日
    浏览(85)
  • 微信小程序---- 外卖小程序查看实时地图路线(骑手端&用户端)【高德地图】

    前言:1. 在小程序中需要使用map组件,文档链接:https://developers.weixin.qq.com/miniprogram/dev/component/map.html 2.使用的是高德地图,所以需要引进相关的js,下载链接:https://lbs.amap.com/api/wx/download 3.去往高德官方申请需要用的key,操作链接:https://lbs.amap.com/api/wx/guide/create-project/get-key

    2024年02月16日
    浏览(61)
  • UniApp 制作高德地图插件

    1、下载Uni插件项目 在Uni官网下载Uni插件项目,并参考官网插件项目创建插件项目. 开发者须知 | uni小程序SDK 如果下载下来项目运行不了可以参考下面链接进行处理 UniApp原生插件制作_wangdaoyin2010的博客-CSDN博客 2、引入高德SDK 2.1 在高德官网下载对应SDK 相关下载-Android 地图SD

    2024年02月12日
    浏览(91)
  • VUE调用高德地图之电子围栏

    最近项目上电子围栏功能,就是地图上限定的区域内实现限行功能,用我们身边的事物来举例,共享单车的限行、限停区域就是电子围栏。由此可见,电子围栏最基础的做法就是在地图上实现多边形覆盖物。 效果图大概如下: 照例,第一步:加载JS AP。 1.在public/index.html中加

    2024年02月11日
    浏览(50)
  • uniapp小程序使用高德地图步骤

    以下是在uniapp中使用高德地图的步骤: 首先需要在高德地图官网申请一个属于自己的高德地图key。 在uniapp项目中安装高德地图插件,可以使用以下命令进行安装: 在需要使用高德地图的页面中引入高德地图插件      4.在页面中使用高德地图插件:    其中,key为你在高德

    2024年02月02日
    浏览(33)
  • uniapp App端使用高德地图

    uniapp App端使用高德地图 先去高德官网申请keyhttps://console.amap.com/dev/key/app 关于SHA1生成方法如下:https://lbs.amap.com/faq/android/map-sdk/create-project/43112 我使用的是使用 keytool(jdk自带工具)获取SHA1 PackageName包名和你需要云打包的项目Android包名一样 打开项目manifest.json文件,将所需的

    2024年02月05日
    浏览(70)
  • 记录--在高德地图实现卷帘效果

    今天介绍一个非常简单的入门级小案例,就是地图的卷帘效果实现,各大地图引擎供应商都有相关示例,很奇怪高德居然没有,我看了下文档发现其实也是可以简单实现的,演示代码放到文末。本文用到了图层掩模,即图层遮罩,让图层只在指定范围内显示。 1.创建目标图层

    2024年02月13日
    浏览(53)
  • 申请高德地图API【流程记录】

    现在我们需要使用高德地图的api进行功能的实现,这就需要我们申请一个高德地图的key 1.进入官网 登录账号 点击高德开放平台 | 高德地图API (amap.com)。进行登录 选择控制台 注册为开发者 填写邮箱获取验证码后,进行支付宝扫码进行实名认证 注册完成 点击确认即可 2.申请

    2024年01月17日
    浏览(38)
  • 记录--在高德地图实现流动的线图层

    有朋友反馈说最近分享的内容不太好理解,那么今天来分享个早前开发的图层制作过程,基于GIS数据代码生成流动的车行线,上手很简单。下面我将在实现思路、具体开发、数据来源这几方面逐步讲解,希望读者能从中获取对数据可视化开发的兴趣。文中使用到高德地图JSA

    2024年02月06日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包