uniapp腾讯地图JavaScript Api，H5端和原生APP端可用

u010588886

已于 2024-02-23 16:07:43 修改

阅读量2.8k

点赞数 11

文章标签： uni-app javascript 开发语言 android

于 2024-02-23 15:57:31 首次发布

本文链接：https://blog.csdn.net/u010588886/article/details/136239963

版权

因项目需要，在uniapp中集成使用腾讯地图，为了方便维护，希望通过一套代码实现H5和APP同时可用。H5显示相对简单，APP端比较麻烦，记录下实现过程

一、集成步骤

1.使用 renderjs

script标签使用renderjs，因为JavaScript Api需要调用DOM对象，APP需要使用renderjs技术，保证script运行在webview环境，才能调用DOM对象。

<script lang="renderjs" module="test">
</script>

2.引用地图script

导入腾讯地图JS脚本，因为腾讯地图js不是按照uniapp格式编写，所以不能直接import导入，需要包装成一个js插件，使用 Promise，js加载成功，调用resolve，js加载失败，调用reject。

创建loadJs.js 文件

function loadJs(src) {
  return new Promise((resolve,reject)=>{
    let script = document.createElement('script');
    script.type = "text/javascript";
    script.src= src;
    document.body.appendChild(script);
      
    script.onload = ()=>{
      resolve();
    }
    script.onerror = ()=>{
      reject();
    }
  }).catch((e) => {})
}
 
export default loadJs

在页面中使用

<script lang="renderjs" module="test">
    import loadJs from "../../common/loadJs.js"
    
    export default {

        data() {
            return {
                
            }
        },
        mounted(){
            console.log('renderjs初始化完毕')
            loadJs('https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77').then(()=>{
                // 加载成功，进行后续操作
            })
        },
         methods: {
        }
    }
</script>

3.修改js，兼容uniapp

下载腾讯官网的例子，改造成uniapp兼容的格式。有两种方式，

方式一：

将官网例子中 script 封装成一个个的function，定义在 vue文件的 methods 中，这样就可以直接调用。

方式二：

将官网例子中 script 代码全部拷贝到一个js文件中，再把需要调用的 function 通过 export 关键字导出，在vue文件中进行 import 调用。

4.修改监听事件

腾讯官网例子都是web端的，点击事件都是click，H5端运行需要改成touchend，否则点击无响应

Web端

svg.addEventListener('click', this.onClick); web端用click事件

H5端

svg.addEventListener('touchend', this.onClick); // H5端用touchend事件

二、示例

腾讯官网例子

以自定义覆盖物 -> DOMOverlay 为例，实操下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOMOverlay</title>
</head>
<script charset="utf-