imumz/leaflet-map

一个 Laravel Nova 字段。

安装量: 15,644

依赖者: 0

建议者: 0

安全: 0

星标: 7

关注者: 2

分支: 3

公开问题: 0

语言:Vue

1.1 2021-01-20 09:05 UTC

This package is auto-updated.

Last update: 2024-09-22 15:01:03 UTC


README

GitHub release (latest by date) Packagist

NovaLeafletMap

使用 Vue2Leaflet 自定义 Laravel Nova 地图字段。支持 Google Maps、标记聚合、高度、缩放、纬度和经度坐标、GeoJSON、标记弹窗和自定义标记图标。

寻找 Laravel Nova 地图卡? (https://github.com/iMuMz/NovaMapCard)

image

安装

composer require imumz/leaflet-map

用法

use Imumz\LeafletMap\LeafletMap
...
LeafletMap::make('Map View')

可用方法

缩放

LeafletMap::make('Map View')
->zoom(8)

高度

LeafletMap::make('Map View')
->height('400px') // default is 300px

Google Maps

默认提供商为 OpenStreetMaps。
您必须设置您的 Google Maps API 密钥 (https://developers.google.com/maps/documentation/javascript/get-api-key)。

LeafletMap::make('Map View')
->googleApiKey('')
->googleMapType('roadmap'), // roadmap, satellite or hybrid

纬度 / 经度(点)

地图将自动居中到提供的坐标。

LeafletMap::make('Map View')
->type('LatLon')
->point($this->my_latitude,$this->my_longitude)

GeoJSON

您必须手动设置 GeoJson 中心。

LeafletMap::make('Map View')
->type('GeoJson')
->geoJson('')
->center('-6.081689','145.391881')

GeoJson 示例

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "popup": "I am a Popup"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          23.8623046875,
          -30.221101852485987
        ]
      }
    }
  ]
}

弹窗

LeafletMap::make('Map View')
->popupName('popup')

自定义标记图标

LeafletMap::make('Map View')
->mapIconUrl('/images/marker-icon.png')

您现在可以传递额外的参数来设置图标大小和锚点

->mapIconUrl('/images/marker-icon.png',[100,100],[50,50])

Screenshot 2020-10-06 at 10 09 14