README

作者：Penalver Antony apenalver@openstudio.fr

本模块允许集成Google地图并提供一些选项。

1. 安装

手动

将模块复制到 <thelia_root>/local/modules/ 目录，并确保模块名称为TheliaGoogleMap。
在thelia管理面板中激活它

注意：在使用之前，您需要在配置表单中配置Google地图的google api密钥。
获取API密钥的说明： https://developers.google.com/maps/documentation/javascript/tutorial

Composer

将其添加到主thelia composer.json文件中

composer require thelia/thelia-googlemap-module:~1.0

2. 使用

使用smarty函数将其集成到模板中：{google_map id="YOUR_ID"}{/google_map}

一些选项是可用的

已弃用选项，建议使用cluster-options-callback（自版本1.7起）

3. 标记源

要使用标记源，您需要遵守以下格式。

JSON格式

{
    title : "TITLE MARKER",
    loc : [ "LATITUDE" ,"LONGITUDE" ],
    description : "DESCRIPTION",
    info : "SOME INFORMATIONS,
    link : "URL TO BIND BUTTON",
    link-label : "LABEL FOR BUTTOM"
}

4. 模板化

模板列表

一些模板默认集成

创建自己的模板

1. 创建一个js文件
1. 获取theliaGoogleMapTemplate变量
1. 按如下方式插入您的模板

    "red": {
        "featureOpts": [
            {
                stylers: [
                    {hue: '#890000'},
                    {visibility: 'simplified'},
                    {gamma: 0.5},
                    {weight: 0.5}
                ]
            },
            {
                elementType: 'labels',
                stylers: [
                    {visibility: 'off'}
                ]
            },
            {
                featureType: 'water',
                stylers: [
                    {color: '#890000'}
                ]
            }
        ],
        "styledMapOptions": {
            name: "Red Template"
        }
    },

1. 将您的js文件插入到 main.after-javascript-include 插件

5. 信息窗口

要自定义信息窗口，您必须修改以下CSS类

thelia-google-map-info-window
thelia-google-map-info
thelia-google-map-title
thelia-google-map-descp
thelia-google-map-link

6. 选项

6.1 插入Google地图js

您可以将Google Map API的包含限制在模块配置中的特定插件中。您只需切换配置密钥，Google Map包含脚本将绑定从 "main.after-javascript-include" 更改为 "theliagooglemap.front.insertjs"。要在一个页面上插入脚本，请在主包含javascript之前添加插件。

要添加的插件

{hook name="theliagooglemap.front.insertjs" modulecode="TheliaGoogleMap"}

6.2 geocoder-error-callback的示例

{google_map id="test-address" zoom=17 address="sdklgjodfh" geocoder-error-callback="callBackGeo"}
<script>
function callBackGeo(status){
  alert(status);
}
</script>

6.3 cluster-options-callback的示例

要使用自定义聚类选项，您必须像这样使用cluster-options-callback

{google_map id="test-address" zoom=14 address="sdklgjodfh" cluster="1" cluster-options-callback="clusterOptions"}
<script>
function clusterOptions(status){
  var clusterOptions = {
    gridSize: 60,
    styles: [
      {
        url: "http:///mysite.com/frontOffice/default/assets/img/cluster-1.png",
        height: 46,
        width: 36,
        anchor: [10, 0],
        textColor: '#ffffff',
        textSize: 11
      },
      {
        url: 'http://mysite.com/frontOffice/default/assets/img/cluster2.png',
        height: 46,
        width: 36,
        anchor: [0, 0],
        textColor: '#ff0000',
        textSize: 15
      }
    ]
  };

  return clusterOptions;
}
</script>

thelia / thelia-googlemap-module

维护者

详细信息