logo

  • 欢迎各位友链
  • 本站支持自适应
  • 技术合作请留言

  • 首页
  • 文章 
    • vue
    • app
    • node
    • 生活
    • 小程序
    • javascript
    • uniapp
  • 案例 
    • app
    • 小程序
    • pc
  • 相册
  • 友链
  • 留言
  • 微语
  • 关于

uniapp使用webview来加载地图达到地图选点功能

 2020-07-31
 椰子皮
 0
 1563
“ uniapp上要做选择地址的功能,顿时感觉有点不好实现,灵光一闪,可以用腾讯地图的选点组件以webview来实现呀 ”

在uniapp中选择地址,本来是想用地图map组件,但看了一下没有比较好的实现方式,于是就想到了用网页来实现;下面看看我的代码吧。


首先我们需要一个html网页,对,就是.html后缀的文件

map.html


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>地点选择</title>
  </head>
  <body>
    <iframe 
      id="mapPage" 
      width="100%" 
      height="750px" 
      frameborder=0
      src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=你的key&referer=myapp">
    </iframe>
    <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>
    <script type="text/javascript">
      window.addEventListener('message', function (event) {
        var loc = event.data;
        if (loc && loc.module == 'locationPicker') {
          console.log('location', loc);
          uni.postMessage({
            data: loc
          })
        }
      }, false);
    </script>
  </body>
</html>


然后我们拿到这个html地址,例如:可以放到static目录,/static/html/map.html


APP上面map.vue

<template>
  <div class="map-warp">
    <!--#ifdef H5-->
    <web-view 
      src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=你的key&referer=myapp"
      @message="onMessage">
    </web-view>
    <!--#endif-->

    <!--#ifdef APP-PLUS-->
    <web-view src="/static/html/map.html" @message="onMessage"></web-view>
    <!--#endif-->

	</div>
</template>

<script>
  export default {
  data() {
    return {
      height: uni.getSystemInfoSync().screenHeight,
    }
  },
  onReady() {
    const self = this
    //#ifdef H5
    if (window.isListen) {
      // 防止多次注册addEventListener事件
        return
    }
    window.addEventListener('message', function (event) {
    var loc = event.data;
    if (loc && loc.module == 'locationPicker') {
      console.log('location', loc);
      self.getPositon(loc, self)
    };
      window.isListen = true
      window.removeEventListener('message', function() {}, true)
    }, false)
    //#endif
  },
  methods: {
    onMessage(res) {
      console.log('app接收网页消息:', res.detail.data[0])
      this.getPositon(res.detail.data[0], this)
    },
    getPositon(res, self) {
      uni.$emit('onAddressChange', res)
      setTimeout(function() {
        self.$nav.back()
      }, 1000)
     }
  },
}
</script>

<style scoped lang="scss">
</style>


到此就可以愉快的玩耍了,APP和H5都能使用



觉得不错点个赞哦


支付宝 微信
 2

app
 vue+typescript使用tinymce富文本编辑器
 uniapp去掉安卓启动提示存储权限
暂无内容,快抢沙发吧~



表情
 不支持canvas
椰子皮
椰子皮
觉得不错就点个赞吧
 181
 关注 公众号
1288 运行天数
174 今日pv
52 文章数量
 最近更新
 2021-04-08 22:25 更新了 文章
 js查找出现次数最多的字符并统计次数

 最新微语
  • 把清新风格改为毛玻璃效果,虽然有点卡,但 2020-05-31
  • 本站春季主题已完成,大家觉得怎样。 2020-03-15
  • 很久没更新了,不知道说啥,提前祝大家新年 2018-06-05
 最新评论
  • 歌尽花颜
    歌尽花颜 Win10 2021-02-24
    文章 @touchmove.stop.prevent怎么加在根元素上呀?.prevent不是只支持H5的吗?
  • kiinlam
    kiinlam Win10 2021-02-04
    文章 https://ask.dcloud.net.cn/article/36549
  • 小何
    小何 Win10 2021-01-04
    文章 这样取消弹窗了就不是app的正常运行过程了;APP权限拒绝之后怎么让它可以正常进入应用,而不是拒绝了权限就退出应用了
 最多点赞
 最多评论
  • 全新椰子皮博客版本介绍及说明。
    全新椰子皮博客版本介绍及说明。...
    2017-11-23 赞:20
  • vuex action 与mutations 的区别
    vuex action 与mutations 的区别...
    2018-06-24 赞:17
  • vue+typescript使用tinymce富文本编辑器
    vue+typescript使用tinymce富文本编辑...
    2020-06-09 赞:11
  • 让height:auto有过度效果
    让height:auto有过度效果...
    2017-12-22 赞:
  • css3使用transform: scale 元素出现偏移
    css3使用transform: scale 元素出现偏...
    2018-03-10 赞:
  • 结合lazyload实现文章页里面的图片预加载
    结合lazyload实现文章页里面的图片预加载...
    2017-10-05 赞:
 标签
uniapp javascript typescript 小程序 app vue nuxt node
 友情链接
申请
mashihuan Khari & Yaru 美好记忆 帅气的木木 大蒜博客 Aquan 快乐编程 fivewoods Paul 贺德强 太傅博客 梁巨才博客 jielin littlewin IT技术宅
首页 申请友链 关于本站 广告合作
CopyRight © 2016-2020 - 椰子皮 - 浙ICP备16003960号