PHPackages                             iini/baidumap - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. iini/baidumap

ActiveLibrary

iini/baidumap
=============

description...

03PHPCI failing

Since Feb 19Pushed 6y ago1 watchersCompare

[ Source](https://github.com/IINI/baidumap)[ Packagist](https://packagist.org/packages/iini/baidumap)[ RSS](/packages/iini-baidumap/feed)WikiDiscussions master Synced 6d ago

READMEChangelog (1)DependenciesVersions (1)Used By (0)

Use BaiduMap in laravel-admin
=============================

[](#use-baidumap-in-laravel-admin)

\#接入百度地图.浏览器端SDK的Javascri Api,实现从数据库中获取标注点的经纬度和特定的图标类型参数来自定义标注点的位置和图标样式，引用内置的标注点点击监听时间来弹出标注点的相关信息，infowindow弹窗可以自定义

Screenshot
----------

[](#screenshot)

[![demo](https://github.com/IINI/baidumap/raw/master/demo.PNG)](https://github.com/IINI/baidumap/blob/master/demo.PNG)

Installation
------------

[](#installation)

```
composer require iini/baidumap

php artisan vendor:publish
```

use `php artisan vendor:publish` seclect BaiduMapServiceProvider

Get BaiduApiAK
--------------

[](#get-baiduapiak)

Open `http://lbs.baidu.com/apiconsole/key?application=key` to get ak code (using browser JavaScript API)

Configuration
-------------

[](#configuration)

Open `config/admin.php`, add configurations that belong to this extension at `extensions` section.

```
    'extensions' => [
       'baidumap' =>[
            // Set to `false` if you want to disable this extension

            'enable' => true,

            //Set relevant parameters of baidu map API
            //For the time being, this release only supports API version 3.0

            'config' =>[

                'https-enable'=> true,  //open api https
                'version' => '3.0',     //api version
                'baiduapiak' => ''   //baidumap-api ak

            ]
        ]
    ]
```

Usage
-----

[](#usage)

Create a view in views directory like `resources/views/admin/map.blade.php`, and add following codes:

```

@php
    $config = 'admin.extensions.baidumap.config'
@endphp

@php
    $baidumap_enable = 'admin.extensions.baidumap';
    $path=config("$baidumap_enable.enable")?asset('vendor/iini/baidumap/map-init.js'):'';
@endphp

```

editing `app/Admin/route.php` add route

```
    $router->get('/map','BaiduMapController@index')->name('map');
    $router->get("/map/point",'BaiduMapController@point');
```

add `BaiduMapController.php` in `App\Admin\Controllers`

```
class BaiduMapController extends Controller
{
    public function index(Content $content)  //reture views
    {

        return $content
            ->title('BaiduMap')
            ->body(new Box('MAP',view('admin.map')));
    }
    public function point()                 //jQuery to use Ajax to get the location coordinates json
    {
        $list = DB::table("data")->get();     //从数据库中获取标注点位置
        foreach ($list as &$item)   {          //遍历删除或增加list,list中有标注点的经纬度,js中用到例如：data[i].longitude, data[i].latitude
            $item->machineid
                = $item->id;
            unset($item->id);
            $item->pointname = $item->name;
            unset($item->name);
            unset($item->created_at);
            unset($item->updated_at);
        }
        unset($item);
        return json_decode($list,JSON_UNESCAPED_UNICODE);
    }
}
```

Editing the `vendor/iini/baidumap/map-init.js` file to customize marker and infowindow

```
    $.ajax({
        type: "get",
        dataType: "JSON",
        url: "https://xxx.com/admin/map/point",    //自定义的获取地图标注点的经纬度(记住修改域名)
        success: function (data) {
            var res_url = 'https://xxx.com/vendor/iini/baidumap/'; //获取自定义的标注图标的根路由(记住修改域名)
            var map = new BMap.Map("container");
            var point = new BMap.Point(106.633979, 26.388056);  //自定义初始中心位置
            map.centerAndZoom(point, 17);  // 编写自定义函数，创建标注
            var myIcon = new BMap.Icon("site.png", new BMap.Size(52, 94));
            var myIcon10 = new BMap.Icon(res_url+"ten_percent.png", new BMap.Size(52, 94));//把图标实例化(图标建议使用50px*50px大小)
            //定义marker上面弹出的信息窗口

            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
            var opts = {
                width: 300,     // 信息窗口宽度
                height: 200,     // 信息窗口高度
                title: "机器详情", // 信息窗口标题
                enableMessage: true//设置允许信息窗发送短息
            };
            for (i = 0; i