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类