README

Jonnitto.GoogleMaps 包，适用于 Neos CMS

使用此包，您可以轻松地将 Google 地图和/或街景以及静态地图包含到 Neos CMS 中。贡献非常欢迎！

安装

大多数情况下，您需要调整包的一些设置（例如 Settings.yaml 中的配置）。因此，将相应的包添加到您的主题 composer 中很重要。通常这位于 Packages/Sites/ 下的站点包。要正确安装，请前往您的主题包（例如 Packages/Sites/Foo.Bar）并运行以下命令

composer require jonnitto/googlemaps --no-update

使用 --no-update 命令可防止依赖项自动更新。在将包添加到您的主题 composer.json 之后，返回 Neos 安装根目录并运行 composer update。完成了！您所需的包现在已正确安装。

Google API

您至少需要一个 Google API 密钥，如果您想使用静态地图，还需要一个签名密钥。在此处了解如何获取这些密钥
您需要以下 API

• 地理编码 API
• 地图 JavaScript API
• 对于静态地图，您还需要 地图静态 API

修改

• 要设置选项，请使用全局变量 GoogleMapsOptions
• 要设置标记，请使用全局变量 GoogleMapsPin
• 要包含功能，请使用 GoogleMapsFunction

在包的 JavaScript 中，以下代码被执行

if (typeof GoogleMapsPin === "string") {
    marker.icon = GoogleMapsPin;
} else if (typeof GoogleMapsPin === "object") {
    extend(marker, GoogleMapsPin);
}
        
if (typeof GoogleMapsFunction === "function") {
    GoogleMapsFunction();
}

if (typeof GoogleMapsOptions === "object") {
    extend(object.Map.options, GoogleMapsOptions);
}

if (typeof GoogleStreetviewOptions === "object") {
    extend(object.Streetview.options, GoogleStreetviewOptions);
}

这样，您几乎可以用地图做任何事情。

示例：自定义标记

window.GoogleMapsFunction () => {
    window.GoogleMapsPin = {
        icon: {
            url: '/YOUR/PATH/TO/THE/MapPin.png',
            anchor: new google.maps.Point(10, 50),
            scaledSize: new google.maps.Size(22, 40)
        }
    };
}

或

window.GoogleMapsPin = '/YOUR/PATH/TO/THE/MapPin.png';

示例：自定义地图选项

window.GoogleMapsOptions = {
    streetViewControl: false,
    mapTypeControl: false,
    scrollwheel: false,
    styles: [
        {
            "elementType": "geometry",
            "stylers": [
                {
                    "color": "#f5f5f5"
                }
            ]
        }
    ]
};