laravel_admin地图标记点demo

在 laravel-admin 中实现一个位置分布地图，通常会涉及到以下几个步骤：

确定数据源：确定您要展示在地图上的位置数据来源。这些数据可能来自数据库、API 或其他服务。
选择地图服务：选择一个地图服务提供商，如 Google Maps、Baidu Maps、AMap 等。
注册地图 API：根据所选的地图服务，注册并获取 API 密钥。
创建地图组件：在 laravel-admin 中创建一个新的组件或使用现有的组件来集成地图。
配置地图选项：配置地图的初始视图、缩放级别和其他选项。
添加标记：将位置数据添加为地图上的标记。
实现交互功能：根据需求实现点击标记查看详细信息等交互功能。

以下是一个示例，演示如何在 laravel-admin 中使用百度地图组件：

首先，在 laravel-admin 的 extensions 目录下创建一个新的组件目录，例如 map，并在该目录中创建一个服务提供者 MapServiceProvider：

php

namespace App\Admin\Extensions;

use Illuminate\Support\ServiceProvider;

class MapServiceProvider extends ServiceProvider
{
    public function boot()
    {
        // 注册视图和路由
        $this->loadViewsFrom(__DIR__, 'map');
        $this->app->booted(function () {
            $this->app['router']->group(['prefix' => 'admin', 'namespace' => '\App\Admin\Controllers'], function ($router) {
                require __DIR__ . '/routes.php';
            });
        });
    }
}

然后，在 config/admin.php 中注册这个组件：

php

'extensions' => [
    // ...
    'map' => [
        'service_provider' => \App\Admin\Extensions\MapServiceProvider::class,
        'namespace' => 'App\Admin\Extensions',
    ],
    // ...
],

接下来，创建地图的视图文件，例如在 resources/views/vendor/map/index.blade.php：

blade

<!DOCTYPE html>
<html>
<head>
    <title>位置分布地图</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的API密钥"></script>
</head>
<body>
    <div style="width: 100%; height: 500px;" id="map"></div>
    <script type="text/javascript">
        var map = new BMap.Map("map");    // 创建Map实例
        var point = new BMap.Point(116.404, 39.915);  // 创建点坐标
        map.centerAndZoom(point, 12);  // 初始化地图，设置中心点坐标和级别
        map.addControl(new BMap.NavigationControl());  // 添加控件

        // 添加标记
        var marker = new BMap.Marker(point);  // 创建标记
        map.addOverlay(marker);  // 将标记添加到地图中

       var point2 = new BMap.Point(116.414, 39.920);  // 创建点坐标
       var marker2 = new BMap.Marker(point2);  // 创建标记
        map.addOverlay(marker2);  // 将标记添加到地图中
    </script>
</body>
</html>

最后，创建控制器和路由来展示这个视图：

php

namespace App\Admin\Controllers;

use App\Admin\Extensions\Map;

class MapController extends Controller
{
    public function index()
    {
        return view('vendor.map.index');
    }
}

// 在 MapServiceProvider 的 routes.php 中定义路由
Route::get('map', [MapController::class, 'index'])->name('admin.map.index');

现在，访问 http://yourdomain.com/admin/map 将展示一个带有默认标记的地图。您可以根据实际数据动态生成标记，并添加交互功能。

户厕系统的map_allocation.blade.php

<?php

use App\Models\TmOrderManagement;
//$data = TmOrderManagement::all();
//foreach ($data as $key => $value) {
//    //$data[$key] = explode(',', $value);
//    $longitude = $value['longitude'];
//    $latitude = $value['latitude'];
//    $data[$key] = [$longitude, $latitude];
//    //dump(json_decode($value));
//}
////$data = array_unique((array)$data);
//$data = array_values((array)array_unique($data));去重报错 用下面的方法
$data = TmOrderManagement::all()->toArray(); // 确保 $data 是索引数组
// 使用集合去重
$uniqueData = collect($data)->map(function ($item) {
    return [$item['longitude'], $item['latitude']];
})->unique(true)->values()->toArray();
dump($data);
dump($uniqueData)
?>
    <!DOCTYPE html>
<html>
<head>
    <title>位置分布地图</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak="{{env('BAIDU_MAP_API_KEY')}}></script>
</head>
<body>
<div style="width: 100%; height: 500px;" id="map"></div>
<script type="text/javascript">
    var map = new BMap.Map("map");    // 创建Map实例
    var point_cneter = new BMap.Point(117.72, 29.851679);  // 创建点坐标
    map.centerAndZoom(point_cneter, 12);  // 初始化地图，设置中心点坐标和级别
    map.addControl(new BMap.NavigationControl());  // 添加控件
    // 添加标记
    var marker_center = new BMap.Marker(point_cneter);// 创建标记
    map.addOverlay(marker_center); // 将标记添加到地图中

    // var point2 = new BMap.Point(117.72412, 29.851454);
    // var marker2 = new BMap.Marker(point2);
    // map.addOverlay(marker2);
    // var point3 = new BMap.Point(117.72412, 29.851454);
    // var marker3 = new BMap.Marker(point3);
    // map.addOverlay(marker3);

    //循环添加点
{{--    @for($i=0;$i<count($data);$i++)--}}
{{--    var point{{$i}} = new BMap.Point({{$data[$i][0]}}, {{$data[$i][1]}});--}}
{{--    var marker{{$i}} = new BMap.Marker(point{{$i}});--}}
{{--    map.addOverlay(marker{{$i}});--}}
{{--    @endfor--}}
    @for($i=0;$i<count($uniqueData);$i++)
    var point{{$i}} = new BMap.Point({{$uniqueData[$i][0]}}, {{$uniqueData[$i][1]}});
    var marker{{$i}} = new BMap.Marker(point{{$i}});
    map.addOverlay(marker{{$i}});
    @endfor
</script>
</body>
</html>