andrewdanilov/yii2-yandexmap

雅虎地图

安装次数: 396

依赖项: 0

建议者: 0

安全: 0

星标: 1

关注者: 2

分支: 0

公开问题: 0

类型:yii2-extension

1.0.5 2023-03-10 19:40 UTC

This package is auto-updated.

Last update: 2024-09-10 23:02:03 UTC


README

小部件加载雅虎地图,并使用数组或JSON文件中的处理器URL在地图上放置标记。

安装

安装此扩展的首选方式是通过 Composer

运行以下命令:

composer require andrewdanilov/yii2-yandexmap "~1.0.0"

或添加以下内容到您的 composer.json 文件的 require 部分:

"andrewdanilov/yii2-yandexmap": "~1.0.0"

用法

<?= \andrewdanilov\yandexmap\YandexMap::widget([
    'id'  => 'some-unique-dom-id', // optional, an ID applied to widget wrapper
    'apikey' => '', // optional, yandex map api key
    'center' => [
        'latitude' => '52.449837',
        'longitude' => '-1.930617',
    ], // or in short 'center' => ['52.449837', '-1.930617']
    'zoom' => 14, // optional, default 12
    'points' => [
        [
            'id' => 'point-1',
            'title' => 'Point 1 Caption',
            'text' => 'Point 1 Text (html allowed)',
            'color' => '#00ff00',
            'latitude' => '52.449837',
            'longitude' => '-1.930617',
        ],
        [
            'id' => 'point-2',
            'title' => 'Point 2 Caption',
            'text' => 'Point 2 Text (html allowed)',
            'color' => '#0000ff',
            'latitude' => '52.449845',
            'longitude' => '-1.930029',
        ],
    ],
    //'pointsUrl' => '/points.json', // url used to get an array of points instead of manual setting the 'points' param
    'scroll' => true, // optional, zoom map by scrolling, default false
    'wrapperTag' => 'div', // optional, html tag to wrap the map, default 'div'
    'wrapperOptions' => [ // optional, attributes passed to \yii\helpers\Html::tag() method for constructing map wrapper
        'class' => 'map-wrapper',
        'style' => 'width:100%;height:400px;',
    ],
    // Javascript function name to handle clicks on placemarks.
    // Callback function can accept just one param - point ID string.
    'jsPointsClickCallback' => 'myCallback',
]) ?>

处理点击标记的回调函数示例

<script>
    function myCallback(point_id) {
		console.log(point_id)
    }
</script>

points.json 示例

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "id": "point-1",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    52.449837,
                    -1.930617
                ]
            },
            "properties": {
                "hintContent": "some hint",
                "balloonContent": "some text"
            }
        },
        {
            "type": "Feature",
            "id": "point-2",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    52.449845,
                    -1.930029
                ]
            },
            "properties": {
                "hintContent": "some other hint",
                "balloonContent": "some other text"
            }
        }
    ]
}

使用PHP生成points.json示例

<?php
$items = [
    [
        "type" => "Feature",
        "id" => 'point-1',
        "geometry" => [
            "type" => "Point",
            "coordinates" => [52.449837, -1.930617],
        ],
        "properties" => [
            "hintContent" => 'some hint',
            "balloonContent" => 'some text',
        ],
    ],
    [
        "type" => "Feature",
        "id" => 'point-2',
        "geometry" => [
            "type" => "Point",
            "coordinates" => [52.449845, -1.930029],
        ],
        "properties" => [
            "hintContent" => 'some other hint',
            "balloonContent" => 'some other text',
        ],
    ],
];
$collection = [
    "type" => "FeatureCollection",
    "features" => $items,
];
echo json_encode($collection);