【短链接源码安装】【源码阅读基础2019】【超级金牛启动源码】微信小程序地图源码

2024-11-26 14:45:35 来源:高淇oa源码 分类:探索

1.微信小程序怎么打开地理位置 很急 谢谢!微信!小程序地!图源
2.uinapp小程序&原生小程序引入高德地图并转化地理位置
3.微信小程序 腾讯地图显示偏差问题解决
4.微信小程序 wxapp地图 map详解
5.关于微信小程序web-view中H5页面使用百度或腾讯地图出现不支持非业务域名坑爹问题终极解决方案!微信

微信小程序地图源码

微信小程序怎么打开地理位置 很急 谢谢!小程序地!图源短链接源码安装!微信

       由于小程序只提供了我们一个获取地理位置、小程序地速度的图源api,并没有获取的微信相关地位位置的信息等等,因此我们还需要借助一些第三方的小程序地api来实现

       我们可以使用百度地图的api来获取地位位置的信息。

       1>申请地址

       /index.php?图源title=wxjsapi/guide/key

       2>

       第二步:下载百度地图的api ,链接:/detail/michael_ouyang/

       解压后,微信里面有2个js文件,小程序地一个是图源源码阅读基础2019常规没压缩的,另一个是压缩过的

       PS:由于小程序项目文件大小限制为1M,建议使用压缩版的js文件!

       3>

        第三步:引入JS模块

       在项目根目录下新建一个路径,将百度的js文件拷贝到新建的路径下,完成。

       如下图所示,新建路径 "libs/bmap-wx" ,将 bmap-xw.min.js 文件拷贝至 "libs/bmap-wx" 路径下。

       4>

        第四步:在所需的js文件内导入js

       // 引用百度地图,注意:require传入一个相对路径

       var bmap = require('../../libs/bmap-wx/bmap-wx.js');

       5>

       第五步:编辑代码

       注意:此处楼主使用的ak是随便写的,同学们需要自行申请!!!

       xxx.wxml:

       <view>

        <viwe>经度:{ { longitude}}</viwe>

        <view>纬度:{ { latitude}}</view>

        <view>地址:{ { address}}</view>

        <view>城市:{ { cityInfo.city}}</view>

       </view>

       xxx.js:

       // 引用百度地图微信小程序JSAPI模块

       var bmap = require('../../libs/bmap-wx/bmap-wx.min.js');

       var wxMarkerData = []; //定位成功回调对象

       Page({

        data:{

        ak:"FHG7utZtdyX

uinapp小程序&原生小程序引入高德地图并转化地理位置

       对于uinapp小程序和原生小程序引入高德地图并转化地理位置的超级金牛启动源码问题,以下步骤能够提供直观的解决方案。

       首先,在uinapp小程序中进行如下操作:

       进入mainfest.json文件配置permission块,勾选地理位置权限。

       获取高德地图的用户Key。

       进入微信公众平台,添加合法域名。

       下载高德SDK文件。

       在组件中引入amap-wx..js文件,并使用高德地图实现地理位置转化。

       接着,在原生小程序的引入步骤如下:

       同样获得高德地图的用户Key。

       进入微信公众平台添加合法域名。

       下载高德SDK文件。8051proteus源码

       在组件中引入amap-wx..js文件,并获取高德地图的天气信息。至此,uinapp小程序和原生小程序均成功引入高德地图,并实现了地理位置的转化与天气信息的获取。

微信小程序 腾讯地图显示偏差问题解决

       背景

       在小程序中使用map组件,可以调用腾讯地图的API,将一些固定的点标记到地图界面上,点的经纬度获取是通过android端百度地图API获取的,所以此时将这个位置点信息直接设置上去会出现偏差,而且偏差还比较大

       小程序设置位置点

       关于如何在map组件上设置位置点,详细请查看腾讯官方文档

       首先看一下map组件:

       <map id="map" longitude="." latitude="." scale="" controls="{ { controls}}" bindcontroltap="controltap" markers="{ { markers}}" bindmarkertap="markertap" polyline="{ { polyline}}" bindregionchange="regionchange" show-location style="width: %; height: px;"></map>

       其markers是需要设置在地图界面的位置点数组,数组中的元素就是一个对象。

       markers: [{ iconPath: "/resources/others.png",中远物流系统源码 id: 0, latitude: ., longitude: ., width: , height: }, iconPath: "/resources/others.png", id: 0, latitude: ., longitude: ., width: , height: }],

       这里的latitude和longitude如果直接给其他地图定位的点,那么相同的这个点位置,在小程序中会出现偏差;

       原因

       小程序中的定位方式默认的是wgs,而百度地图中使用的是BD ,还有gcj。所以这里会出现偏差。

       解决方案

       使用离线的js库gcoord,将位置信息进行一次转换;

       首先下载这个js库,放至某一个目录下,我这里是utils下

       在需要的界面导入

       import gcoord from './././utils/gcoord.js'

       调用转换函数

       var result = gcoord.transform( [resArr[i].JD, resArr[i].WD], // 经纬度坐标 gcoord.BD, // 当前坐标系(百度) gcoord.GCJ);

       这里在小程序中修改为gcj,国测数据,因此转为gcj;

微信小程序 wxapp地图 map详解

       微信小程序 wxapp地图 map:

       map

       属性名类型默认值说明longitude Number 中心经度 latitude Number 中心纬度 scale Number 1 缩放级别 markers Array 标记点 covers Array 覆盖物

       标记点

       标记点用于在地图上显示标记的位置,不能自定义图标和样式

       属性说明类型必填备注latitude 纬度 Number 是 浮点数,范围 - ~ longitude 经度 Number 是 浮点数,范围 - ~ name 标注点名 String 是 desc 标注点详细描述 String 否

       覆盖物

       覆盖物用于在地图上显示自定义图标,可自定义图标和样式

       属性说明类型必填备注latitude 纬度 Number 是 浮点数,范围 - ~ longitude 经度 Number 是 浮点数,范围 - ~ iconPath 显示的图标 String 是 项目目录下的路径,支持相对路径写法 rotate 旋转角度 Number 否 顺时针旋转的角度,范围 0 ~ ,默认为 0

       地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。

       标记点markers只能在初始化的时候设置,不支持动态更新。

       示例:

       <-- map.wxml --><map longitude="." latitude="." markers="{ { markers}}" covers="{ { covers}}" style="width: px; height: px;"></map>// map.jsPage({ data: { markers: [{ latitude: ., longitude: ., name: 'T.I.T 创意园', desc: '我现在的位置' }], covers: [{ latitude: ., longitude: ., icaonPath: './images/car.png', rotate: }, { latitude: ., longitude: ., iconPath: './images/car.png', rotate: }] }})

       感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

关于微信小程序web-view中H5页面使用百度或腾讯地图出现不支持非业务域名坑爹问题终极解决方案!

       在开发微信小程序时,遇到了一个棘手问题:在使用web-view组件跳转到H5页面时,如果该页面包含百度或腾讯地图的API,会收到不支持非业务域名的错误提示。经过深入研究和实践,我找到了一种解决方案,可以同时满足业务需求和避免错误提示。

       我使用的是mpvue进行小程序的开发,尽管如此,这个问题与使用原生小程序开发时面临的情况并无本质区别。

       解决步骤如下:

       1. 当使用web-view组件进行页面跳转时,务必注意路由中的哈希模式(#号)。如果不进行相应的编码处理(如使用encodeURIComponent),可能会导致跳转失败。同样地,解码操作(decodeURIComponent)也需正确实施,以确保H5页面能够正确加载。

       2. 在H5页面的代码中,引入了百度或腾讯地图的API。然而,微信小程序跳转到该页面时,会提示不支持非业务域名。尽管网上有建议将地图域名添加至微信小程序后台的请求配置中,但该方法并未解决问题。于是,我在H5页面的代码中添加了判断逻辑,以识别微信环境。在微信环境下,不加载地图API,以避免错误提示。

       3. 我在H5页面代码中创建了专门的文件夹和JS文件,分别用于封装百度地图(BMap.js)和腾讯地图(TMap.js)的逻辑。通过这种方式,可以在微信环境下跳过地图API的引入,从而避免错误提示。

       4. 为了确保解决方案的灵活性,我将处理逻辑集成到H5页面的特定文件中,这些文件在需要使用地图功能时被调用。这样,在小程序跳转到H5页面时,地图功能将不会被调用,但在实际应用中,会逐步将所有功能集成至小程序内,以实现更紧密的集成和更好的用户体验。

       通过上述方法,不仅解决了微信小程序与H5页面集成过程中遇到的地图API支持问题,也确保了产品的正常运行和用户体验。虽然这是一个临时解决方案,但随着项目的发展,我们会逐步优化,将更多功能集成至小程序中,以提供更高效、无缝的用户体验。

本文地址:http://0553.net.cn/news/97b749292410.html 欢迎转发