微信小程序学习实录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: 获取用户地址信息

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

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

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

    "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

微信小程序学习实录3(环境部署、百度地图微信小程序、单击更换图标、弹窗信息、导航、支持腾讯百度高德地图调起)
解决方案:
设置请求合法域名,才能正常使用百度小程序 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)

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

二、核心代码

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

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

微信小程序学习实录3(环境部署、百度地图微信小程序、单击更换图标、弹窗信息、导航、支持腾讯百度高德地图调起)
电脑端的导航和手机端预览导航有差异,见下图:
微信小程序学习实录3(环境部署、百度地图微信小程序、单击更换图标、弹窗信息、导航、支持腾讯百度高德地图调起)

(一)逻辑层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)
            }
        })
    },

数据格式如下:
微信小程序学习实录3(环境部署、百度地图微信小程序、单击更换图标、弹窗信息、导航、支持腾讯百度高德地图调起)
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%;
}

@漏刻有时文章来源地址https://www.toymoban.com/news/detail-432613.html

到了这里,关于微信小程序学习实录3(环境部署、百度地图微信小程序、单击更换图标、弹窗信息、导航、支持腾讯百度高德地图调起)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包