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

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

百度地图微信小程序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%;
}


@漏刻有时

相关实践学习
基于函数计算快速搭建Hexo博客系统
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
5天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的微信食堂线上订餐小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的微信食堂线上订餐小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
10天前
|
小程序 前端开发 JavaScript
微信小程序|音乐播放器小程序设计与实现
微信小程序|音乐播放器小程序设计与实现
|
10天前
|
小程序 前端开发 JavaScript
微信外卖小程序
微信外卖小程序
|
10天前
|
小程序 前端开发 JavaScript
微信小程序|英语学习交流平台小程序
微信小程序|英语学习交流平台小程序
|
10天前
|
小程序 前端开发 JavaScript
微信小程序|springboot“口腔助手”小程序的设计与实现
微信小程序|springboot“口腔助手”小程序的设计与实现
|
3天前
|
小程序 前端开发 Android开发
Android企业微信分享到小程序
Android企业微信分享到小程序
10 0
|
5天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp的微信小程序评分小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的微信小程序评分小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
10天前
|
小程序 前端开发 JavaScript
微信小程序|智慧物流小程序的设计与实现
微信小程序|智慧物流小程序的设计与实现
|
5天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的小程序疫苗预约网站系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的小程序疫苗预约网站系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
3天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的校园导航微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的校园导航微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
21 4