what? ! PHP development#How easy is it to call Tencent map? ?

1. First, we open the official website of Tencent Map: https://lbs.qq.com/webApi/component/componentGuide/componentPicker

Tencent map fuzzy search address.

Just copy and paste the code.

<iframe id="mapPage" width="100%" height="100%" frameborder=0
    src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=your key&referer=myapp">
</iframe>
 
<script>
    window.addEventListener('message', function(event) {
        // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
        var loc = event.data;
        if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
          console.log('location', loc);
        }
    }, false);
</script>

Format of returned position information

{
    module:'locationPicker',
    latlng: {
        lat: 39.998766,
        lng: 116.273938
    },
    poiaddress: "北京市海淀区新建宫门路19号",
    poiname: "颐和园",
    cityname: "北京市"
}

2. Don't talk nonsense, just go to the code:

{block name="content"}

{include file='service/formstyle'}

<div class="layui-card-body padding-left-40">
    <form onsubmit="return false;" id="GoodsForm" data-auto="true" method="post" class='layui-form layui-card table-block' autocomplete="off">
        <div class="layui-card-body">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-xs5">
                    <label class="block relative">
                        <span class="color-green font-w7">服务点名称</span>
                        <span class="color-desc margin-left-5">serviceName</span>
                        <input name="serviceName" value='{$vo.serviceName|default=""}' required placeholder="请输入服务点名称"
                               class="layui-input">
                        <p class="help-block"><b>必选</b>，请填写服务点名称</p>
                    </label>
                </div>

                <div class="layui-col-xs5">
                    <label class="block relative">
                        <span class="color-green font-w7">服务点电话</span>
                        <span class="color-desc margin-left-5">servicePhone</span>
                        <input type="tel" name="servicePhone" value='{$vo.servicePhone|default=""}' required
                               placeholder="请输入服务点电话"
                               class="layui-input">
                        <p class="help-block"><b>必选</b>，请填写服务点电话</p>
                    </label>
                </div>

            </div>

            <div class="layui-row layui-col-space15">
                <div class="layui-col-xs5">
                    <label class="relative block">
                        <span class="color-green font-w7">服务点地址</span><span class="color-desc margin-left-5">serviceAddress</span>
                        <input name="serviceAddress" value='{$vo.serviceAddress|default=""}' required
                               placeholder="请输入服务点地址"
                               class="layui-input">
                        <span class="color-desc">可选，请填写服务点地址</span>
                    </label>
                </div>
                <div class="layui-col-xs5">
                    <label class="relative block">
                        <span class="color-green font-w7">服务点详细地址</span><span class="color-desc margin-left-5">serviceAddressDetail</span>
                        <input name="serviceAddressDetail" value='{$vo.serviceAddressDetail|default=""}' required
                               placeholder="请输入服务点详细地址"
                               class="layui-input">
                        <span class="color-desc">可选，请填写服务点详细地址</span>
                    </label>
                </div>
            </div>

            <div class="hr-line-dashed margin-top-10 margin-bottom-10"></div>
            <div class="layui-row layui-col-space15">
                <div class="layui-col-xs5">
                    <label class="relative block">
                        <span class="color-green font-w7">开始营业时间</span><span class="color-desc margin-left-5">serviceStart</span>
                        <input data-date name="serviceStart" value='{$vo.serviceStart|default=""}' required
                               placeholder="服务点开始营业时间"
                               class="layui-input">
                        <span class="color-desc">可选，服务点开始营业时间</span>
                    </label>
                </div>

                <div class="layui-col-xs5">
                    <label class="relative block">
                        <span class="color-green font-w7">结束营业时间</span><span
                            class="color-desc margin-left-5">serviceEnd</span>
                        <input data-date name="serviceEnd" value='{$vo.serviceEnd|default=""}' required
                               placeholder="服务点开始营业时间"
                               class="layui-input">
                        <span class="color-desc">可选，服务点开始营业时间</span>
                    </label>
                </div>
            </div>


            <div class="layui-col-xs5">
                <label class=" block ">
                    <span class="color-green font-w7">营业状态</span><br>
                    {if isset($vo.isService)}
                    {if $vo.isService==1 }
                    <label class="think-radio "><input type="radio" value="1" name="isService" title="营业中" checked=""
                                                       lay-ignore="">营业中</label>
                    <label class="think-radio"><input type="radio" value="0" name="isService" title="休息中" lay-ignore="">休息中</label>
                    {else}
                    <label class="think-radio "><input type="radio" value="1" name="isService" title="营业中"
                                                       lay-ignore="">营业中</label>
                    <label class="think-radio"><input type="radio" value="0" name="isService" title="休息中" checked=""
                                                      lay-ignore="">休息中</label>
                    {/if}
                    {else /}
                    <label class="think-radio "><input type="radio" value="1" name="isService" title="营业中" checked=""
                                                       lay-ignore="">营业中</label>
                    <label class="think-radio"><input type="radio" value="0" name="isService" title="休息中" lay-ignore="">休息中</label>
                    {/if}
                </label>
            </div>


            <div class="layui-col-xs5">
                <label class=" block ">
                    <span class="color-green font-w7">是否总店</span><br>
                    {if isset($vo.parentId)}
                    {if $vo.parentId==0 }
                    <label class="think-radio "><input type="radio" value="0" name="parentId" title="总店" checked=""
                                                       lay-ignore="">总店</label>
                    <label class="think-radio"><input type="radio" value="1" name="parentId" title="服务点" lay-ignore="">服务点</label>
                    {else /}

                    <label class="think-radio "><input type="radio" value="0" name="parentId" title="总店" lay-ignore="">总店</label>
                    <label class="think-radio"><input type="radio" value="1" name="parentId" title="服务点" checked=""
                                                      lay-ignore="">服务点</label>
                    {/if}
                    {else /}
                    <label class="think-radio "><input type="radio" value="0" name="parentId" title="总店" lay-ignore="">总店</label>
                    <label class="think-radio"><input type="radio" value="1" name="parentId" title="服务点" checked=""
                                                      lay-ignore="">服务点</label>
                    {/if}
                </label>
            </div>

            <div class="layui-form-item">
                <span class="color-green font-w7 label-required-prev">服务点LOGO及服务点相册</span>
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th style="width:90px" class="text-center">服务点logo</th>
                        <th class="text-left">服务点相册</th>
                    </tr>
                    <tr>
                        <td class="text-center">
                            <input name="serviceLogo" type="hidden" value="{$vo.serviceLogo|default=''}">
                            <script>$('[name="serviceLogo"]').uploadOneImage();</script>
                        </td>
                        <td class="text-left">
                            <input name="serviceImages" type="hidden" value="{$vo.serviceImages|default=''}">
                            <script>$('[name="serviceImages"]').uploadMultipleImage();</script>
                        </td>
                    </tr>
                    </thead>
                </table>
            </div>

            <div class="layui-form-item">
                <div class="color-green font-w7">经纬度定位</div>
                <label class="relative block">
                    <input id="position" name="position" value="{$vo.serviceLatitude},{$vo.serviceLongitude}"
                           class="layui-input" placeholder="请选择服务点定位">
                    <a data-copy="{$vo.serviceLatitude},{$vo.serviceLongitude}" class="fa fa-copy input-right-icon"></a>
                </label>
                <div class="help-block">腾讯地图定位</div>
            </div>
        </div>

        <div class="hr-line-dashed"></div>
        {notempty name='vo.id'}<input type='hidden' value='{$vo.id}' name='id'>{/notempty}

        {notempty name='vo.createTime'}<input type='hidden' value='{$vo.createTime}' name='createTime'>{/notempty}
        <div class="layui-form-item text-center">
            <button class="layui-btn layui-btn-danger" ng-click="pageBack()" type="button">取消编辑</button>
            <button class="layui-btn" type="submit">保存数据</button>
        </div>
    </form>
</div>

<iframe id="mapPage" width="100%" height="100%" frameborder=0
        src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=**这里填你自己的地图的KEY**&referer=myapp">
</iframe>

{/block}

{block name='script'}
<script>
    /*! 表单初始化 */
    window.form.render();
    /*! 加载扩展插件 */
    require(['ckeditor', 'angular'], function () {
        window.createEditor('[name="projectDesc"]', {height: 500});
        var app = angular.module("GoodsForm", []).run(callback);
        angular.bootstrap(document.getElementById(app.name), [app.name]);

        function getRand(length, prefix) {
            return (function (time, code) {
                code += parseInt(time.substr(0, 1)) + parseInt(time.substr(1, 1)) + time.substr(2, 8);
                while (code.length < length) code += Math.round(Math.random() * 10);
                return code;
            })(Date.now().toString(), prefix || '' + '')
        }

        function callback($rootScope) {
            $rootScope.pageBack = function () {
                $.msg.confirm('确定要取消编辑吗？', function (index) {
                    history.back(), $.msg.close(index);
                });
            };
            /*! 去除空白字符 */
            $rootScope.trimSpace = function (value) {
                return (value + '').replace(/\s*/ig, '');
            };
        }
    });


    window.addEventListener('message', function(event) {
        // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
        var loc = event.data;
        if (loc && loc.module == 'locationPicker') {
            //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
            console.log( loc.latlng.lat);
            $("#position").val(loc.latlng.lat+","+loc.latlng.lng);
        }
    },false);
</script>

{/block}

Effect picture:

Note: The framework I use is ThinkAdmin v6. Here the map can directly use the above code to search for the address of Tencent Maps and get the latitude and longitude of the address. Goodbye!