# layui map组件

**Repository Path**: out-of-town/layui-map-component

## Basic Information

- **Project Name**: layui map组件
- **Description**: 基于腾讯地图 Javascript API GL 和 Layui 实现web端地图功能，包含点标记、手动选点、地址搜索等功能
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 1
- **Created**: 2024-08-14
- **Last Updated**: 2025-06-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# layui map组件

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

![输入图片说明](map/Snipaste_2024-08-14_16-17-25.png)

#### 接口说明

1. `initMap(elementId,longitude,latitude,longitudeInputName,latitudeInputName)`
    
    参数说明
    - `elementId` 绑定元素ID选择器，必填
    - `longitude` 地图中心点经度，非必填，默认 `116.307484`
    - `latitude` 地图中心点纬度，非必填，默认 `39.984120`
    - `longitudeInputName` 地图中心点经度记录input框name值，非必填，默认 `longitude`
    - `latitudeInputName` 地图中心点纬度记录input框name值，非必填，默认 `latitude`
2. `searchMap(address)`
    
    参数说明
    - `address` 搜索地址，必填

    注意：其他 api 必须在 initMap() 函数执行后才能正常使用。


#### 使用示例

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