> 插件说明：安装此插件后需要配置自定义字段方可显示地图定位 ## 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 |