PHP开发#调用腾讯地图

admin 管理员组

文章数量: 887021

1.首先我们打开腾讯地图官网：https://lbs.qq/webApi/component/componentGuide/componentPicker

腾讯地图模糊搜索地址。

直接复制代码粘贴即可。

<iframe id="mapPage" width="100%" height="100%" frameborder=0
    src="https://apis.map.qq/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>

返回的位置信息格式

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

2.废话不多说，直接上代码：

{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/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}

效果图：

注意：我用的框架是ThinkAdmin v6 ，这里地图直接用以上代码可以实现腾讯地图的地址搜索，获取地址的经纬度。告辞！

本文标签： 腾讯 地图 php