layui 腾讯地图组件

介绍

一个简单方便实用的腾讯地图组件，基于腾讯地图 Javascript API GL 和 Layui 实现web端地图功能，包含点标记、手动选点、地址搜索等功能

接口说明

initMap(elementId,longitude,latitude,longitudeInputName,latitudeInputName)

参数说明
elementId  绑定元素ID选择器，必填
longitude  地图中心点经度，非必填，默认 116.307484
latitude  地图中心点纬度，非必填，默认 39.984120
longitudeInputName  地图中心点经度记录input框name值，非必填，默认 longitude
latitudeInputName  地图中心点纬度记录input框name值，非必填，默认 latitude

searchMap(address)

参数说明
address  搜索地址，必填

使用示例

0.下载文件，把map文件夹放在component目录下，路径可以随意，后面引用改成对应路径就行。

1.在body中预先准备地图容器，并在CSS样式中定义地图(容器)显示大小

<div id="map-container" style="width: 700px;height: 400px"></div>

再准备两个input控件存储地图中心点经纬度

<input type="hidden" name="longitude" value="" class="layui-input" lay-verify="location"> 
<input type="hidden" name="latitude" value="" class="layui-input">

2.引入API库

<script src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=service"></script>

参数说明
key  腾讯地图开发key
libraries  用来指明加载的附加库，service是服务类附加库，是基于腾讯地图开放平台 WebService API封装的接口能力

有疑问可以查看官方文档https://lbs.qq.com/webApi/javascriptGL/glGuide/glBasic

3.创建并显示地图

<script>
    layui.config({
        base : '/component/'
    }).extend({
        tencentMap: 'map/tencentMap',
    }).use(['tencentMap'],function(){
        var $ = layui.jquery;
        var tencentMap = layui.tencentMap;


        //初始化腾讯地图
        tencentMap.initMap('map-container');
        //搜索地图，绑定一个点击事件，实现搜索
        $("#search_map").click(function () {
            var address = '广东省广州市海珠区广州塔';
            tencentMap.searchMap(intactAddress);
        })
    });
</script>

Gitee地址： layui map组件: 基于腾讯地图 Javascript API GL 和 Layui 实现web端地图功能，包含点标记、手动选点、地址搜索等功能