> 插件說明：安裝此插件后需要配置自定義字段方可顯示地圖定位 ## 1.介紹 * 實現鼠標移動定位 * 集成3個地圖api，百度，高德，天地圖 * 實現地圖api與坐標系混用，自動轉換坐標 * 實現搜索定位 ## 2.在`application\admin\view\custom`新建custom_address.html文件 ## 3.代碼如下 ``` {php}$address = parse_attr($vo['value']);{/php} <div class="layui-form-item"> <label class="layui-form-label">{$vo.title} {if condition="isset($vo.ifrequire) AND $vo.ifrequire"}&nbsp;<font color="red">*</font>{/if}</label> <div class="layui-form-field-label"> <!--默認是天安門的維度116.404|39.915--> <div class="layui-input-inline"> <input id="longitude" name="{$vo.fieldArr}[{$vo.name}][longitude]" placeholder="請輸入經度" class="layui-input map-location-input" lay-verType="tips" value="{$address[0]|default='116.404'}" /> </div> <div class="layui-input-inline"> <input id="latitude" name="{$vo.fieldArr}[{$vo.name}][latitude]" placeholder="請輸入緯度" class="layui-input" lay-verType="tips" value="{$address[1]|default='39.915'}" /> </div> <div class="layui-input-inline"> <button id="locationBtn" type="button" class="layui-btn"><i class="layui-icon layui-icon-location map-location"></i>定位</button> </div> </div> {if $vo.remark}<div class="layui-form-mid layui-word-aux">{$vo.remark|raw}</div>{/if} </div> <script> window.HOST_TYPE=1; layui.config({ version: '{$Think.config.version.yzncms_release}', base: '__STATIC__/libs/layui_exts/' }).extend({ locationX: '../../addons/address/locationX', location: '../../addons/address/location', }).use(['layer', 'form', 'jquery', 'location'], function() { $ = layui.jquery; var form = layui.form; var location = layui.location; location.render("#locationBtn", { type: 1, apiType: "baiduMap", coordinate: "baiduMap", mapType: 2, zoom: 15, title: '區域定位', init: function() { return { longitude: $("#longitude").val(), latitude: $("#latitude").val() }; }, success: function(data) { $("#longitude").val(data.lng); $("#latitude").val(data.lat); } }); }); </script> ``` ## 4.自定義字段選擇剛才建的`custom_address.html`文件  ## 5.js參數 | 參數 | 說明 | | --- | --- | | type | 0 : 僅定位 1： 帶有搜索的定位 | | title | 標題 | | zoom | 默認縮放級別 | | apiType | 地圖api 可選參數 baiduMap, tiandiMap, gaodeMap | | coordinate | 坐標系 可選參數 baiduMap, tiandiMap, gaodeMap | | mapType | 地圖類型 0 普通地圖 1 衛星地圖 2 混合地圖 | | searchKey | 默認的檢索關鍵字，type=1時生效 | | init | 初始化方法，初始化中心點位置 | | success | 回調方法，參數data是定位標記的經緯度信息 | ## 6.效果如下  ## 7.前端調用 插件后臺設置秘鑰，地址：http://lbsyun.baidu.com/apiconsole/key?application=key 代碼如下 ``` {:hook('show_map',['width'=>800,'height'=>500,'title'=>'某某網絡科技有限公司','content'=>'公司地址：江蘇省蘇州市吳中區某某工業園一區<br/>手機：158-88888888<br/>郵箱：admin@admin.com','coordinate'=>'116.003874,39.014889','point'=>18])} ``` > 以上代碼會輸出一個簡單百度地圖案例（復雜的或其他地圖請自行修改`addons\address\map.html`文件），其中地址坐標就用插件獲取的坐標來替換，比如我在系統配置建了一個名為map的自定義字段，則換成`'coordinate'=>config('site.map')`即可 | 參數 | 說明 | | --- | --- | | width | 地圖寬度，默認800 | | height | 地圖高度，默認500 | | title | 標題，一般寫公司名稱 | | content | 內容 ，一般寫公司介紹| | coordinate | 坐標，默認北京天安門坐標，可用變量代替，如`config('map')`| | point | 縮放級別，默認18 |