bagusindrayana/laravel-maps

在Laravel中设置mapbox和leaflet地图初始化

v0.2.2 2022-01-02 00:22 UTC

This package is auto-updated.

Last update: 2024-09-06 18:27:58 UTC


README

演示: https://laravel-maps-demo.herokuapp.com/

安装

composer require bagusindrayana/laravel-maps

将LaravelMapServiceProvider::class添加到config/app.php

    'providers'=>[
        //....

        Bagusindrayana\LaravelMaps\LaravelMapsServiceProvider::class,

        //...
    ],
    

发布提供者

php artisan vendor:publish --provider=Bagusindrayana\LaravelMaps\LaravelMapsServiceProvider

用法

在控制器中

$map = LaravelMaps::leaflet('map')
->setView([51.505, -0.09], 13);

return view('your-view',compact('map'));

在视图中

<html>
<head>
    <title>My Map</title>
    {!! @$map->styles() !!}
</head>
<body>
    {!! @$map->render() !!}
    {!! @$map->scripts() !!}  
</body>
</html>

Leaflet

特性

  • 标记
  • 圆圈
  • 多边形
  • geojson
  • 基本事件和方法

基本用法

//'map' is variable name will be use in javascript code
$map = LaravelMaps::leaflet('map')
->setView([51.505, -0.09], 13)
->addMarker(function(LeafletMarker $marker){
    return $marker
    ->latLng([51.5, -0.09])
    ->bindPopup('<b>Hello world!</b><br>I am a popup.');
})
->addCircle(function(LeafletCircle $circle){
    return $circle
    ->latLng([51.508, -0.11])
    ->options([
        'radius'=>500,
        'color'=>'red',
        'fillColor'=>'#f03',
        'fillOpacity'=>0.5
    ])
    ->bindPopup("I am a circle.");
})
->addPolygon(function(LeafletPolygon $polygon){
    return $polygon
    ->latLng([
        [51.509, -0.08],
        [51.503, -0.06],
        [51.51, -0.047]
    ])
    ->bindPopup("I am a polygon.");                
})
->addPopup("I am a standalone popup.",[51.513, -0.09]);

方法和事件

方法动态,因此您可以使用原始leaflet的许多方法https://leaflet.npmjs.net.cn/reference.html#map-method方法的参数可以是数组、闭包、字符串和RawJs类

Mapbox

特性

  • 标记
  • geojson
  • 基本事件和方法

基本用法

//'map' is variable name will be use in javascript code
$map = LaravelMaps::mapbox('map',[
    "center"=>[106.827293,-6.174465],
    "zoom"=>13,
]);

$map->on('load',function($m){
    $m->addMarker(function(MapboxMarker $marker){
        return $marker
        ->lngLat([51.5, -0.09])
        ->setPopup('<b>Hello world!</b><br>I am a popup.');
    });
});

方法和事件

方法动态,因此您可以使用原始mapbox的许多方法https://docs.mapbox.com/mapbox-gl-js/api/map/#map-instance-members方法的参数可以是数组、闭包、字符串和RawJs类