Login
芋圆社区 > 编程 > 天地图 > 与安卓端交互

与安卓端交互

860
0
2023-08-24
2023-08-24
Hey、小怪兽

  • • 与安卓端交互用Java和Webview嵌入H5,先修改几个比较坑的问题
  • • Q:点击地图直接输入框其他东西都放大了
  • • A:修改一下index.html的meta,不允许放大
  • <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    修改为
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  • • Q:输入框没有边框了,之前去掉后,在安卓端显示特别突兀
  • • A:修改index.css,增加边框
  • input {
      width: 70%;
      height: 33px;
      padding-left: 10px;
      /* border: none; */
      border: 1px solid #b5b5b5;
      border-radius: 10px;
      outline: none;
    }
  • • Q:在安卓端移动和点击地图会莫名其妙地聚焦输入框,这样会弹出小键盘,
  • • A:在初始化地图的时候加入了这些失去焦点的方法
  • // 初始化地图
    const initMap = () => {
      ...其他代码
    
      // 初始化地图失去输入框焦点
      document.getElementById("searchPlaceInput").blur();
      // 点击,拖拽,缩放地图都要让输入框失去焦点
      map.addEventListener("click", (e) => {
        document.getElementById("searchPlaceInput").blur();
      });
      map.addEventListener("zoomend", (e) => {
        document.getElementById("searchPlaceInput").blur();
      });
      map.addEventListener("touchstart", (e) => {
        document.getElementById("searchPlaceInput").blur();
      });
      map.addEventListener("touchmove", (e) => {
        document.getElementById("searchPlaceInput").blur();
      });
      map.addEventListener("touchend", (e) => {
        document.getElementById("searchPlaceInput").blur();
      });
    
      ...其他代码
    };
  • • 交互过程,详细的Java代码没有,具体就是Java用@JavascriptInterface这个东西,和一些啥的,把方法加到前端页面的window下,在JS里面直接调用:
  • // h5MapFunc是Java的类,getUserInfo是它下面的方法
    if (window.h5MapFunc && typeof window.h5MapFunc.getUserInfo === "function") {
      window.h5MapFunc.getUserInfo();
    }
  • • 这里有个很奇怪的地方,就是Java那边return了一个对象给我,好像不是JSON对象,我用JSON.parse没办法解析会报错:
  • // 大概是长这样的东西
    '{"name":"小白","age":12,"money":2000,"info":"其他信息"}'
  • • 捣鼓了半天,没办法传JSON对象就算了,我直接解析了:
  • // 调用安卓的方法
    const callAndroidMethod = () => {
      if (window.h5MapFunc && typeof window.h5MapFunc.getUserInfo === "function") {
        const userInfo = window.h5MapFunc.getUserInfo();
    
        const name = userInfo.match(/"name":"(.*?)"/)[1];
        const age = userInfo.match(/"age":([\d]+)/)[1];
        const money = userInfo.match(/"money":([\d]+)/)[1];
        const info = userInfo.match(/"info":"(.*?)"/)[1];
        
        // 小白 12 2000 其他信息
        console.log(name, age, money, info)
      }
    };

上一篇:弹窗和Loading

下一篇:天地图完整代码

Message Board
回复
回复内容不允许为空
留言字数要大于2,小于200!
提交成功,5s后刷新页面!
编程导航

加载天地图

切换地图类型

地图搜索功能

海量点加载

加载聚合Marker

添加事件和信息窗口

点击聚合点

弹窗和Loading

与安卓端交互

天地图完整代码

天地图panTo导致聚合点散落

Copyright © 2020 芋圆社区

Powered by 浙ICP备2020039309号-1

此页面不支持夜间模式!

已进入夜间模式!

已进入普通模式!

搜索框不允许为空

签到成功!经验+5!芋圆币+2!

签到失败!今日已签到!

需要登录社区账号才可以进入!

复制成功
寄,页面未加载完成或页面无锚点