How to implement positioning map display in php

How to implement positioning map display in php: 1. Introduce JS files; 2. Inject the permission verification configuration through the config interface; 3. Modify the JS of the click button in the html.

The operating environment of this article: Windows 7 system, PHP version 7.1, Dell G3 computer.

How to display positioning map in php?

php: Web development to implement WeChat JS (positioning, map display, photo selection functions)

Today I will talk about the functions of JS in WeChat web development and share them. I hope it will help You guys are helpful.

Prerequisite: You must have a public account, pass WeChat authentication, bind a domain name, and obtain corresponding information, appid, appsecret, etc.

WeChat development documentation: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

Let’s take a look at the renderings:

1: Introduce JS files

2: config interface injection permission verification configuration

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>

 wx.config({
        debug: false,
        appId: appid,
        timestamp: timestamp,
        nonceStr: noncestr,
        signature: signature,
        jsApiList: [              'openLocation',              'chooseImage'
        ]
    });

Note: All pages that need to use JS-SDK The configuration information must be injected first, otherwise it will not be called (the same URL only needs to be called once. The web app of the SPA that changes the URL can be called every time the URL changes.

Currently the Android WeChat client does not support PushState is a new H5 feature, so using pushState to implement web app pages will cause signature failure. This problem will be fixed in Android 6.2).

JS for clicking the button in html:

      // 定位
　　　　$("#location").click(function () {
            wx.getLocation({
                type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                success: function (res) {                    var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                    var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                    var speed = res.speed; // 速度，以米/每秒计
                    var accuracy = res.accuracy; // 位置精度
                    DSXUI.success('纬度'+latitude);
                    $("#qrcodevalue").text('纬度'+latitude+" ---经度"+longitude);
                }
            });
        });
　　　　　　// 地图
        $("#btn1").click(function () {
            wx.openLocation({
                latitude: 26.581379, // 纬度，浮点数，范围为90 ~ -90
                longitude: 104.86983, // 经度，浮点数，范围为180 ~ -180。
                name: '贵州省贵阳市', // 位置名
                address: '详情地址', // 地址详情说明
                scale: 22, // 地图缩放级别,整形值,范围从1~28。默认为最大
                infoUrl: 'http://h5.zhangwoo.cn/?m=weixin&c=wxtest&a=share' // 在查看位置界面底部显示的超链接,可点击跳转，没用            });
        });
　　　　　　// 微信选图
         $("#btn2").click(function () {
             wx.chooseImage({
                 count: 3, // 默认9
                 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                 success: function (res) {                     var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                     $("#qrcodevalue").text('照片的本地ID列表'+localIds);
                 }
             });
         });

Note: The parameters appid, appsecret and other information I use are in the php code.

Recommended learning: "PHP Video Tutorial"

The above is the detailed content of How to implement positioning map display in php. For more information, please follow other related articles on the PHP Chinese website!