有什么办法能够绕过uni-app封装层调用到更多的h5地图的能力？

[wangzz]

目前uni-app只封装了有限的h5地图能力，如果希望调用腾讯地图h5版的更多地图能力，有什么可行的方式吗？

[Otto-J]

感谢反馈。我理解你的意思是想拓展 h5 中 map 组件的能力。在 h5 中使用 map 的更多能力，方式有很多：

1. 你可以尝试理解 map 组件源码，尝试添加对应的功能。
2. 使用特定厂商提供的 map js-sdk 在网页中自由定制。比如腾讯地图的 js-sdk https://lbs.qq.com/webApi/javascriptV2/jsDoc/jsDocIndex

如果我理解的不正确，请补充更多信息。

[wangzz]

感谢反馈。我理解你的意思是想拓展 h5 中 map 组件的能力。在 h5 中使用 map 的更多能力，方式有很多：

1. 你可以尝试理解 map 组件源码，尝试添加对应的功能。
2. 使用特定厂商提供的 map js-sdk 在网页中自由定制。比如腾讯地图的 js-sdk https://lbs.qq.com/webApi/javascriptV2/jsDoc/jsDocIndex

如果我理解的不正确，请补充更多信息。

我们想基于uni-app去开发在h5和微信小程序中运行的业务，所以目前只能走第1种方式。要想绕过uni-app封装层去调用更多的h5地图能力，需要获取到h5的地图实例。通过看uni-app map组件的源码发现，获取到的地图实例是经过封装过的，并不是厂商提供的原始地图实例，因此没法自己去封装能力，我看到的map组件代码在这里： this._maps = result。

或者还有哪里有更深层的封装是我没找到的吗？希望能够指导下🙏🏻 @Otto-J

[wangzz]

请问uniapp类似下面腾讯地图官方demo里的创建底图实例的代码在哪个地方？如果能找到这个地方的源码我们就能基于此继续按第1钟思路自行进行能力扩展
https://lbs.qq.com/webDemoCenter/glAPI/glMap/createMap

希望能够指导下🙏🏻

@zhetengbiji

[zhetengbiji]

源码参考贡献指南：https://github.com/dcloudio/uni-app/blob/dev/.github/CONTRIBUTING.md
例如vue2版本的map对应位置在：https://github.com/dcloudio/uni-app/blob/dev/src/platforms/h5/view/components/map/index.vue

[wangzz]

uni-app里暴露的map看上去是经过封装过的？

比如uni-app里创建map的地方：

uni-app/packages/uni-h5/src/view/components/map/index.tsx

Line 288 in b7477df

const map = new maps.Map(mapEl, {

打印这里的map结果是这样：

对比官方demo里的map：
https://lbs.qq.com/webDemoCenter/glAPI/glMap/createMap

打印后的内容是这样：

我理解uni-app中也有类似官网demo里这种调用官方原始API创建地图实例的代码？

请问这块代码是在哪里？

盼答复~ @zhetengbiji

[zhetengbiji]

uni-app里暴露的map看上去是经过封装过的？

比如uni-app里创建map的地方：

uni-app/packages/uni-h5/src/view/components/map/index.tsx

Line 288 in b7477df

const map = new maps.Map(mapEl, {

打印这里的map结果是这样：

对比官方demo里的map： https://lbs.qq.com/webDemoCenter/glAPI/glMap/createMap

打印后的内容是这样：

我理解uni-app中也有类似官网demo里这种调用官方原始API创建地图实例的代码？

请问这块代码是在哪里？

盼答复~ @zhetengbiji

maps 也就是腾讯地图或者高德地图或者，都是统一从 loadMaps 加载而来。

[Otto-J]

我看了上下文的讨论，我们理解的是不是有歧义？我认为你不需要搞那么复杂，你的需求是修改功能，不需要修改 map 在 h5 的底层实现。

这里我通过几个问题，来共识我们的问题。

为什么 uni-app 会封装 h5 的 map?

map 在 h5 平台，是封装简化了腾讯地区 高德地图的实现，是为了让更多人轻松、容易地使用地图的功能。

如果你想自定义 h5 的 map

如果当前 map 不满足你的业务需要，你完全可以在 h5 上封装一个 vue 组件，里面引入 腾讯地图 sdk ，通过挂在空 div 实现功能引入，这样完全依靠自己定义功能。具体如何操作看对应 sdk 的文档。这和普通 web js 项目没有区别。

为什么 uni-app 会封装小程序的 map?

各家小程序默认内置 map 组件、marker 等 api。uni-app 是抹平了各家小程序的差异。本质上还是调用对应小程序平台的原生功能。

如果你想自定义小程序的 map

小程序部分不支持自定义拓展，各家小程序如何实现由厂商决定。

如果你想拓展功能，可以开发自己的组件

你可以封装一个 vue 组件，通过条件编译的方式区分 h5 和小程序平台，封装组件的功能实现，各端 map 组件的表现效果。这个组件你可以自己用，也可以分享给团队的其他人使用，实现组件复用的效果。

开发自己的组件伪代码

伪代码大致如下，思路供你参考

self-map.vue

<template>
<!-- #ifdef H5 -->
<div id='tencent-map />
<!-- #endif -->
<!-- #ifdef mp-weixin-->
<map />
<!-- #endif -->
</template>

在逻辑部分

// #ifdef h5
// 使用腾讯地图、百度高德地区等 sdk 进行开发
// #endif


// #ifdef mp-weixin
wx.createMapContext
// #endif

通过条件编译的方式，实现一个组件让多端运行，地图如何展示取决于你自己如何开发。

总结

希望这种表述方式能够让我们达成共识，简化你的修改逻辑，我现在认为你完全可以不用修改 uni-app 的map 底层实现。既然框架提供的功能不满足你的需求，按照上面的方案自行拓展即可。