什麼？！PHP開發#調用騰訊地圖那麼簡單？？

1.首先我們打開騰訊地圖官網：https://lbs.qq.com/webApi/component/componentGuide/componentPicker

騰訊地圖模糊搜索地址。

直接複製代碼粘貼即可。

<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>

返回的位置信息格式

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

效果圖：

注意：我用的框架是ThinkAdmin v6 ，這裏地圖直接用以上代碼可以實現騰訊地圖的地址搜索，獲取地址的經緯度。告辭！