Yzncms系列教程(十):地图位置插件的使用

御宅男 2020年12月21日 21 17:18 PM 3950浏览 4121字数

安装此插件后需要配置自定义字段方可显示

介绍

  1. 实现鼠标移动定位
  2. 集成3个地图api,百度,高德,天地图
  3. 实现地图api与坐标系混用,自动转换坐标
  4. 实现搜索定位

    新建文件

    在<code>application/admin/view/custom/</code>目录下新建<code>custom_address.html</code>文件

    代码如下

    {php}$address = parse_attr($vo['value']);{/php}
    &lt;div class=&quot;layui-form-item layui-form-text&quot;&gt;
     &lt;label&gt;{$vo.title} {if condition=&quot;isset($vo.ifrequire) AND $vo.ifrequire&quot;} &lt;font color=&quot;red&quot;&gt;*&lt;/font&gt;{/if}&lt;/label&gt;
     &lt;div class=&quot;layui-form-field-label&quot; style=&quot;position: relative;&quot;&gt;
         &lt;!--默认是天安门的维度116.404|39.915--&gt;
         &lt;div class=&quot;layui-input-inline&quot;&gt;
             &lt;input id=&quot;longitude&quot; name=&quot;{$vo.fieldArr}[{$vo.name}][longitude]&quot; placeholder=&quot;请输入经度&quot; class=&quot;layui-input map-location-input&quot; lay-verType=&quot;tips&quot;  value=&quot;{$address[0]|default='116.404'}&quot; /&gt;
         &lt;/div&gt;
         &lt;div class=&quot;layui-input-inline&quot;&gt;
              &lt;input id=&quot;latitude&quot; name=&quot;{$vo.fieldArr}[{$vo.name}][latitude]&quot; placeholder=&quot;请输入纬度&quot; class=&quot;layui-input&quot;  lay-verType=&quot;tips&quot; value=&quot;{$address[1]|default='39.915'}&quot; /&gt;
         &lt;/div&gt;
         &lt;div class=&quot;layui-input-inline&quot;&gt;
             &lt;button id=&quot;locationBtn&quot; type=&quot;button&quot; class=&quot;layui-btn&quot;&gt;&lt;i class=&quot;layui-icon layui-icon-location map-location&quot;&gt;&lt;/i&gt;定位&lt;/button&gt;
         &lt;/div&gt;
     &lt;/div&gt;
     {if $vo.remark}&lt;div class=&quot;layui-form-mid layui-word-aux&quot;&gt;{$vo.remark|raw}&lt;/div&gt;{/if}
    &lt;/div&gt;
    &lt;script&gt;
    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(&quot;#locationBtn&quot;, {
         type: 1,
         apiType: &quot;baiduMap&quot;,
         coordinate: &quot;baiduMap&quot;,
         mapType: 2,
         zoom: 15,
         title: '区域定位',
         init: function() {
             return { longitude: $(&quot;#longitude&quot;).val(), latitude: $(&quot;#latitude&quot;).val() };
         },
         success: function(data) {
             $(&quot;#longitude&quot;).val(data.lng);
             $(&quot;#latitude&quot;).val(data.lat);
         }
     });
    });
    &lt;/script&gt;

    自定义字段

    选择刚才建的<code>custom_address.html</code>文件

    js参数

    参数说明
    type0 : 仅定位 1: 带有搜索的定位
    title标题
    zoom默认缩放级别
    apiType地图api 可选参数 baiduMap, tiandiMap, gaodeMap
    coordinate坐标系 可选参数 baiduMap, tiandiMap, gaodeMap
    mapType地图类型 0 普通地图 1 卫星地图 2 混合地图
    searchKey默认的检索关键字,type=1时生效
    init初始化方法,初始化中心点位置
    success回调方法,参数data是定位标记的经纬度信息

    效果如下

最后修改:2021年04月12日 15:53 PM

非特殊说明,本博所有文章均为博主原创。