mahshamim/hits-laravel-google-maps

Laravel Google Map 包适用于 6.x 版本。您可以在 Laravel 中使用所有 Google 地图功能。

dev-master 2020-03-19 07:45 UTC

This package is auto-updated.

Last update: 2024-09-10 07:12:26 UTC


README

PHPPackages Rank PHPPackages Referenced By Total Downloads Latest Stable Version Latest Unstable Version License

该仓库旨在在 Laravel 6.x 中使用 Google 地图功能。它易于使用且灵活,您只需安装此包,即可在您的网站和/或应用程序中享受 Google 地图。

功能

1. Localizing
2. Map Types
3. Custom Style
4. Makers
5. Info Window
6. Shapes
7. Symbols
8. Overlays
9. KML and GeoRSS
10. Traffic and Bicycling Layer
11. Geocoding Caches
12. Controls
13. Street View
14. Events
15. Reverse Geocoding
16. Travel Moding
17. Proxy

服务和库

1. Directions
2. Geocoding
3. Geometry
4. Drawing
5. Places
6. Autocomplete
7. Adsense
8. Geofence (For now only server side geofence available)

安装

在 composer.json 中添加

  "require": {
      "mahshamim/hits-laravel-google-maps": "^2.3"
      ----
  }

然后

  composer update

或者通过 composer 命令行安装

  composer require mahshamim/hits-laravel-google-maps

添加服务提供者 config/app.php

        Mahshamim\GoogleMaps\GMapsServiceProvider::class,

并在 config/app.php 的别名部分添加

        'GMaps' => Mahshamim\GoogleMaps\Facades\GMapsFacade::class,

现在发布配置文件

    php artisan vendor:publish --provider="Mahshamim\GoogleMaps\GMapsServiceProvider"

用法

示例文件位于 Mahshamim/GoogleMaps/Example

控制器示例;显示方法的参考代码

/******** Custom Map Controls ********/

        $leftTopControls = ['document.getElementById("leftTopControl")']; // values must be html or javascript element
        $this->gmap->injectControlsInLeftTop = $leftTopControls; // inject into map
        $leftCenterControls = ['document.getElementById("leftCenterControl")'];
        $this->gmap->injectControlsInLeftCenter = $leftCenterControls;
        $leftBottomControls = ['document.getElementById("leftBottomControl")'];
        $this->gmap->injectControlsInLeftBottom = $leftBottomControls;

        $bottomLeftControls = ['document.getElementById("bottomLeftControl")'];
        $this->gmap->injectControlsInBottomLeft = $bottomLeftControls;
        $bottomCenterControls = ['document.getElementById("bottomCenterControl")'];
        $this->gmap->injectControlsInBottomCenter = $bottomCenterControls;
        $bottomRightControls = ['document.getElementById("bottomRightControl")'];
        $this->gmap->injectControlsInBottomRight = $bottomRightControls;

        $rightTopControls = ['document.getElementById("rightTopControl")'];
        $this->gmap->injectControlsInRightTop = $rightTopControls;
        $rightCenterControls = ['document.getElementById("rightCenterControl")'];
        $this->gmap->injectControlsInRightCenter = $rightCenterControls;
        $rightBottomControls = ['document.getElementById("rightBottomControl")'];
        $this->gmap->injectControlsInRightBottom = $rightBottomControls;

        $topLeftControls = ['document.getElementById("topLeftControl")'];
        $this->gmap->injectControlsInTopLeft = $topLeftControls;
        $topCenterControls = ['document.getElementById("topCenterControl")'];
        $this->gmap->injectControlsInTopCenter = $topCenterControls;
        $topRightControls = ['document.getElementById("topRightControl")'];
        $this->gmap->injectControlsInTopRight = $topRightControls;

        /******** End Controls ********/

        $config = array();
        $config['map_height'] = "100%";
        $config['center'] = 'Clifton, Karachi';
        
        $this->gmap->initialize($config); // Initialize Map with custom configuration

        /*********** Marker Setup ***********/
        $marker = array();
        $marker['draggable'] = true;
        //Marker event dragend
        $marker['ondragend'] = '
        iw_'. $this->gmap->map_name .'.close();
        reverseGeocode(event.latLng, function(status, result, mark){
            if(status == 200){
                iw_'. $this->gmap->map_name .'.setContent(result);
                iw_'. $this->gmap->map_name .'.open('. $this->gmap->map_name .', mark);
            }
        }, this);
        ';
        $this->gmap->add_marker($marker);
        /*********** End Marker Setup ***********/

        $map = $this->gmap->create_map(); // This object will render javascript files and map view; you can call JS by $map['js'] and map view by $map['html']

        return view('map', ['map' => $map]);

路由示例

Route::get('/map', 'MapController@index');

Route::get('/', function(){
    $config = array();
    $config['center'] = 'New York, USA';
    GMaps::initialize($config);
    $map = GMaps::create_map();

    echo $map['js'];
    echo $map['html'];
});

视图示例

<html>
    <head>
        {!! $map['js'] !!}
    </head>
<body>
    <div class="container">
        <div class="content">
            <div id="leftTopControl" style="padding: 5px; background-color:#fff; box-shadow: #101010; margin: 2px;">
                This is Left Top Control.
            </div>
            <div id="leftCenterControl" style="padding: 5px; background-color:#fff; box-shadow: #101010; margin: 2px;">
                This is Left Center Control.
            </div>
            <div id="leftBottomControl" style="padding: 5px; background-color:#fff; box-shadow: #101010; margin: 2px;">
                This is Left Bottom Control.
            </div>
            <div id="bottomRightControl" style="padding: 5px; background-color:#fff; box-shadow: #101010; margin: 2px;">
                This is Bottom Right Control.
            </div>
            <div id="bottomCenterControl" style="padding: 5px; background-color:#fff; box-shadow: #101010; margin: 2px;">
                This is Bottom Center Control.
            </div>
            <div id="bottomLeftControl" style="padding: 5px; background-color:#fff; box-shadow: #101010; margin: 2px;">
                This is Bottom Left Control.
            </div>
            <div id="rightTopControl" style="padding: 5px; background-color:#fff; box-shadow: #101010; margin: 2px;">
                This is Right Top Control.
            </div>
            <div id="rightCenterControl" style="padding: 5px; background-color:#fff; box-shadow: #101010; margin: 2px;">
                This is Right Center Control.
            </div>
            <div id="rightBottomControl" style="padding: 5px; background-color:#fff; box-shadow: #101010; margin: 2px;">
                This is Right Bottom Control.
            </div>
            <div id="topLeftControl" style="padding: 5px; background-color:#fff; box-shadow: #101010; margin: 2px;">
                This is Top Left Control.
            </div>
            <div id="topCenterControl" style="padding: 5px; background-color:#fff; box-shadow: #101010; margin: 2px;">
                This is Top Center Control.
            </div>
            <div id="topRightControl" style="padding: 5px; background-color:#fff; box-shadow: #101010; margin: 2px;">
                This is Top Right Control.
            </div>
            {!! $map['html'] !!}
        </div>
    </div>
</body>
</html>

地理围栏示例

$polygon = array("25.774,-80.190", "18.466,-66.118", "32.321,-64.757", "25.774,-80.190"); //start and end point should be same
$latlngs = array("-12.043333,-77.028333", "-12.043333,-77.028333");

GMaps::isMarkerInsideGeofence($polygon, $latlngs); //both parameters should be in array
//return will also in array with boolean values like: array(true, false)

贡献

  • 由 @grimseer 添加的代理功能 - 2016年11月22日
  • 由 @wissamdagher 修复通过 https 加载 Google API - 2017年4月4日
  • 由 @wissamdagher 添加的全屏支持地图 - 2017年7月2日
  • 由 @drehimself 修复 Facade 命名空间 - 2017年8月3日
  • 由 @drehimself 修复迁移文件名 - 2017年8月3日

感谢您使用!

如果您喜欢它,请点击 Fork!

如果您有任何疑问或建议,请在支持部分联系我。

致谢

库倡议: BioStall

BioStall 首先为 codeigniter 开发了库,您可以在 http://biostall.com/laravel-google-maps-v3-api-package/ 找到它

从 codeigniter 转换为 Laravel: GeneaLabs -- https://github.com/GeneaLabs/Phpgmaps(但它是未完成的)