微信小程序学习实录3(环境部署、百度地图微信小程序、单击更换图标、弹窗信息、导航、支持腾讯百度高德地图调起)

news2024/12/23 13:25:33

百度地图微信小程序

  • 一、环境部署
    • 1.need to be declared in the requiredPrivateInfos
    • 2.api.map.baidu.com 不在以下 request 合法域名
    • 3.width and heigth of marker id 9 are required
  • 二、核心代码
    • (一)逻辑层index.js
    • (二)渲染层index.wxml
    • (三)样式表index.wxss

百度地图微信小程序JavaScript API(简称小程序JSAPI),支持在微信小程序中使用百度数据资源。小程序JSAPI是对百度地图Web服务API中的部分接口按照微信小程序的规范进行了前端JS封装,方便了微信小程序开发者的调用。部分接口对返回的POI等数据按照微信小程序的数据格式进行了处理,可直接用于小程序的map中。

一、环境部署

1.need to be declared in the requiredPrivateInfos

wx.getLocation need to be declared in the requiredPrivateInfos field in app.json/ext.json(env: Windows,mp,1.06.2303220; lib: 2.31.1)

官方说明:
requiredPrivateInfos

自 2022 年 7 月 14 日后发布的小程序,使用以下8个地理位置相关接口时,需要声明该字段,否则将无法正常使用申明需要使用的地理位置相关接口,类型为数组。
目前支持以下项目:

  • getFuzzyLocation: 获取模糊地理位置
  • getLocation: 获取精确地理位置
  • onLocationChange: 监听实时地理位置变化事件
  • startLocationUpdate: 接收位置消息(前台
  • startLocationUpdateBackground:
  • 接收位置消息(前后台) chooseLocation: 打开地图选择位置
  • choosePoi: 打开POI列表选择位置
  • chooseAddress: 获取用户地址信息

注:若使用以上接口,均需在小程序管理后台,「开发」-「开发管理」-「接口设置」中自助开通该接口权限。

在这里插入图片描述

在这里插入图片描述

    "requiredPrivateInfos": [
        "getLocation",
        "onLocationChange",
        "startLocationUpdateBackground",
        "chooseAddress"
    ],

2.api.map.baidu.com 不在以下 request 合法域名

https://api.map.baidu.com 不在以下 request 合法域名列表中,请参考文档:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html

在这里插入图片描述
解决方案:
设置请求合法域名,才能正常使用百度小程序 JavaScript API。
登录微信小程序-> “设置” -> “开发设置” -> “服务器域名” ->添加 https://api.map.baidu.com; -> 点击"保存并提交"。

3.width and heigth of marker id 9 are required

[渲染层错误] [Component] : width and heigth of marker id 9 are required(env: Windows,mp,1.06.2303220; lib: 2.31.1)

在这里插入图片描述
在这里插入图片描述

二、核心代码

鉴于百度地图微信小程序依然是基于腾讯地图map组件开发的,因此在功能的拓展性、更新速度都不很理想。本案例是基于百度地图微信小程序的基础,予以开发。

  1. wx.showModal,弹窗功能
  2. POI坐标单击更换颜色功能(百度地图原有功能);
  3. wx.openLocation,导航(支持腾讯、百度、高德、APPLE地图功能)

在这里插入图片描述
电脑端的导航和手机端预览导航有差异,见下图:
在这里插入图片描述

(一)逻辑层index.js

  1. 引入百度地图API接口,并配置全局变量
var bmap = require('../../libs/bmap-wx.min.js');
var wxMarkerData = [];
  1. Marker单击事件
 //POI单击事件
    makertap: function (e) {
        var that = this;
        var id = e.markerId;
        that.showSearchInfo(wxMarkerData, id);
        that.changeMarkerColor(wxMarkerData, id);
    },
  1. 引入百度地图对象
    此处的AK为对应的微信小程序的key.
 //加载即引入百度地图
    onLoad: function () {
        //引入百度地图对象
        var that = this;
        var BMap = new bmap.BMapWX({
            ak: 'OGwPpKV6Y6GiLb3***'
        });
        var fail = function (data) {
            console.log(data)
        };
        //获取POI数据
        this.getMarkers()
    },
  1. 调用API数据接口
//调用API数据接口
    getMarkers() {
        var that = this;
        wx.request({
            url: 'https://test.com/data/api/marker.json',
            method: "GET",
            success: function (res) {
                wxMarkerData = res.data.data
                //console.log(wxMarkerData)
                that.setData({
                    markers: wxMarkerData,
                    latitude: wxMarkerData[0].latitude,
                    longitude: wxMarkerData[0].longitude
                });
            },
            fail: function (err) {
                console.log(err)
            }
        })
    },

数据格式如下:
在这里插入图片描述
5. 弹窗及导航事件函数

  //点击显示信息,调整为新窗口
    showSearchInfo: function (data, i) {
        wx.showModal({
            title: data[i].title,
            content: data[i].address,
            showCancel: true, //是否显示取消按钮
            cancelText: "关闭", //默认是“取消”
            cancelColor: '#000', //取消文字的颜色
            confirmText: "导航", //默认是“确定”
            confirmColor: '#000', //确定文字的颜色
            success(res) {
                if (res.confirm) {
                    console.log('用户点击导航')
                    let latitude = parseFloat(data[i].latitude)
                    let longitude = parseFloat(data[i].longitude)
                    let name = data[i].title
                    let address = data[i].address
                    wx.openLocation({
                        latitude,
                        longitude,
                        name,
                        address,
                        scale: 18
                    })
                } else if (res.cancel) {
                    console.log('用户点击关闭')
                }
            }
        })
    },
  1. 单击更换图标函数
 //单击更换图标
    changeMarkerColor: function (data, id) {
        var that = this;
        var markersTemp = [];
        for (var i = 0; i < data.length; i++) {
            if (i === id) {
                data[i].iconPath = "../../img/marker_yellow.png";
            } else {
                data[i].iconPath = "../../img/marker_red.png";
            }
            markersTemp[i] = data[i];
        }
        that.setData({
            markers: markersTemp
        });
    }

(二)渲染层index.wxml

<view class="map_container">
    <map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}" bindmarkertap="makertap"></map>
</view>

(三)样式表index.wxss

.map_container{
    height: 100vh;
    width: 100%;
}

.map {
    height: 100%;
    width: 100%;
}

@漏刻有时

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/483700.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue diff算法与虚拟dom知识整理(2) snabbdom简介并搭建开发环境

snabbdom算是diff算法 和 虚拟dom 的一个鼻租了 vue源码借鉴了snabbdom 这个单词翻译出来叫速度 命名还是用了点心的 后面是 dom 这个 我们大概去猜作者的意思 大概想表示的就是 一个比较快的dom操作 snabbdom的get地址如下 https://github.com/snabbdom/snabbdom 这里的简…

「OceanBase 4.1 体验」|快速安装部署[OBD方式]

文章目录 一、Oceanbase数据库简介1.1 核心特性1.2 系统架构1.2.1 存储层1.2.2 复制层1.2.3 均衡层1.2.4 事务层1.2.4.1 原子性1.2.4.2 隔离性 1.2.5 SQL 层1.2.5.1 SQL 层组件1.2.5.2 多种计划 1.2.6 接入层 二、OceanBase 数据库社区版部署2.1 部署方式2.2 基础环境配置2.3 通…

【华为OD机试真题】信号发射和接收(javaC++python)100%通过率 超详细代码注释 代码深度解读

信号发射和接收 知识点数组栈 单调栈时间限制: 1s 空间限制: 256MB 限定语言:不限 题目描述: 有一个二维的天线矩阵&#xff0c;每根天线可以向其他天线发射信号也能接收其他天线的信号&#xff0c;为了简化起见&#xff0c;我们约定每根天线只能向东和向南发射信号&#xf…

【ROS仿真实战】获取机器人在gazebo位置真值的三种方法(三)

文章目录 前言一. 使用ROS tf库二、 使用Gazebo Model Plugin三、 使用libgazebo_ros_p3d插件四、总结 前言 在ROS和Gazebo中&#xff0c;获取机器人的位置信息通常通过ROS消息传递进行。在这篇文章中&#xff0c;我们将介绍三种获取机器人在Gazebo中位置真值的方法&#xff1…

CTF ASCII码 密码解密题 简单

1. 题目 这次的CTF题目就是一张图片如下&#xff0c;并且说有几个蛋被打乱过。明显是一个密码学的解码题。 2. 解题思路 左边表格给出10种颜色&#xff0c;特别是第二列给出了数字0&#xff0c;种种迹象都指向了10进制。每一个蛋都有三种颜色&#xff0c;代表每个蛋都是三位…

【GORM框架】一文学会用gorm实现对单表的增删改查操作

博主简介&#xff1a;努力学习的大一在校计算机专业学生&#xff0c;热爱学习和创作。目前在学习和分享&#xff1a;数据结构、Go&#xff0c;Java等相关知识。博主主页&#xff1a; 是瑶瑶子啦所属专栏: GORM框架学习 近期目标&#xff1a;写好专栏的每一篇文章 文章目录 一、…

M1 Mac配置JAVA环境

1、下载JDK 目前JDK有Oracle的JDK还有zulu的Open JDK可供选择&#xff0c;因为需要JAVA1.8所以下文以zulu的JDK为例。 Zulu官网&#xff1a;https://www.azul.com/downloads/?packagejdk 选择所需的JDK版本&#xff08;注意选择ARM架构&#xff09;> 下载.dmg包 > 安装 …

DAY 47 Ngnix优化与防盗链

Ngnix优化主要有两种&#xff0c;一种是配置上的优化&#xff0c;一种是内核上的优化 隐藏响应头中的版本号 方法一&#xff1a;curl命令 网页查看 隐藏版本信息 修改nginx的运行用户和组 方法一&#xff1a;在编译安装时&#xff0c;指定运行用户和组 [root nginx-1.12.2]#…

【英语】100个句子记完7000个雅思单词

其实主要的7000词其实是在主题归纳里面&#xff0c;不过过一遍100个句子也挺好的&#xff0c;反正也不多。 文章目录 Sentence 01Sentence 02Sentence 03Sentence 04Sentence 05Sentence 06Sentence 07Sentence 08Sentence 09Sentence 10Sentence 11Sentence 12Sentence 13Sent…

Linux常用的压缩、解压缩以及scp远程传输命令的使用

Linux常用的压缩、解压缩以及scp远程传输命令的使用 1.压缩命令2 解压命令3. 大文件压缩分割为多个压缩文件4. 远程传输命令scp4.1 将本地文件复制到远程主机目录4.2 将本地目录复制到远程主机目录4.3 将远程主机的文件复制到本机4.4 复制远程主机目录到本机 1.压缩命令 tar -…

Packet Tracer - 综合技能练习(配置新交换机的初始设置、SSH 和端口安全)

Packet Tracer - 综合技能练习 地址分配表 设备 接口 IP 地址 子网掩码 S1 VLAN 1 10.10.10.2 255.255.255.0 PC1 NIC 10.10.10.10 255.255.255.0 PC2 NIC 10.10.10.11 255.255.255.0 场景 网络管理员要求您配置新交换机。 在本练习中&#xff0c;您将使用一…

二分搜索算法通解框架

文章介绍了二分搜索最常见的几个场景的使用&#xff1a;寻找一个数、寻找左侧边界以及寻找右侧边界。阅读本文只需读者了解二分搜索的使用限制和基本原理即可。 我相信&#xff0c;友好的讨论交流会让彼此快速进步&#xff01;文章难免有疏漏之处&#xff0c;十分欢迎大家在评…

密码学【java】初探究加密方式之对称加密

文章目录 一 常见加密方式二 对称加密2.1 Cipher类简介2.2 Base算法2.3 补充&#xff1a;Byte&bit2.4 DES加密演示2.5 DES解密2.6 补充&#xff1a;对于IDEA控制台乱码的解决方法2.7 AES加密解密2.8 补充&#xff1a; toString()与new String ()用法区别2.9 加密模式2.9.1 …

MySQL学习笔记第六天

第06章多表查询 5. 7种SQL JOINS的实现 A是员工表&#xff0c;B是部门表。 5.7.1 代码实现 #8. UNION 和 UNION ALL的使用 # UNION&#xff1a;会执行去重操作 # UNION ALL:不会执行去重操作&#xff0c;效率优于前者&#xff0c;开发中优先使用 #结论&#xff1a;如果明确…

【Java入门合集】第二章Java语言基础(四——第二章结束)

【Java入门合集】第二章Java语言基础&#xff08;四——第二章结束&#xff09; 博主&#xff1a;命运之光 专栏&#xff1a;JAVA入门 学习目标 掌握变量、常量、表达式的概念&#xff0c;数据类型及变量的定义方法&#xff1b; 掌握常用运算符的使用&#xff1b; 掌握程序的顺…

【LeetCode股票买卖系列:188. 买卖股票的最佳时机 IV | 暴力递归=>记忆化搜索=>动态规划】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

Hibernate(一)——入门

在之前经常用到操作数据库的框架是Mybatis或者Mybatis-plus。 Hibernate在項目中用过&#xff0c;但没有深入的了解过&#xff0c;所以这次趁着假期把这个框架了解一下。 目录 概念Hibernate和Mybatis的区别Hibernate使用依赖引入Hibernate配置文件XML配置文件详解properties文…

2023 年 五一杯 B 题过程 + 代码(第一问)

文章目录 第一题问题分析PageRank 算法&#xff08;可跳过&#xff09;PageRank 算法修正权重系数 结果各城市链出与链入链出 权重链入 权重 PageRank 算法结果代码 第一题 问题分析 从收货量、发货量、快递数量增长/减少趋势、相关性等多角度考虑&#xff0c;建立数学模型&…

如何使用git更新别人的代码

文章目录 如何使用git更新别人的代码问题说明省流问题示例操作步骤总结总结 如何使用git更新别人的代码 问题说明 当自己git clone别人的代码之后&#xff0c;代码一直停留到本地电脑上&#xff0c;而你就跑了一次程序就搁置了。 后来有一天你想再次运行该代码&#xff0c;但…

可观测性:你的应用健康吗?

一、需求来源 首先来看一下&#xff0c;整个需求的来源&#xff1a;当把应用迁移到 Kubernetes 之后&#xff0c;要如何去保障应用的健康与稳定呢&#xff1f;其实很简单&#xff0c;可以从两个方面来进行增强&#xff1a; 首先是提高应用的可观测性&#xff1b;第二是提高应…