我正在尝试使用这个将谷歌地图放入我的网络网站
它不显示地图,但它尝试:(源代码)
<section>
<div class="googleMapAPI" data-map="{"position":[null,null],& quot;height":"100%","width":"100%","zoom":7,"type":"ROADMAP","scrollable":true,"key":null,"bound":true,"cluster":true,"clusterOptions":[],"waypoint":null}" data-basePath="/maps" data-markersFallback="/maps/?do=map-markers"></div>
</section>
我试图遵循该插件的文档,但它只是没有显示地图。任何想法我做错了什么?
class MapPresenter extends BaseCorePresenter
{
use \Oli\GoogleAPI\TMap;
private $map;
private $markers;
public function __construct(\Oli\GoogleAPI\IMapAPI $mapApi, \Oli\GoogleAPI \IMarkers $markers)
{
parent::__construct();
$this->map = $mapApi;
$this->markers = $markers;
}
public function createComponentMap()
{
$map = $this->map->create();
$markers = $this->markers->create();
$markers = $this->markers->create();
$markers->addMarker(array(50.250718,14.583435), false, null);
$markers->setIcon('someIcon.png');
$markers->setMessage('<h1>Hello world</h1>', false);
$markers->deleteMarkers();
$markers->isMarkerClusterer(); // neer markers group to one cluster
$markers->fitBounds(); // zoom as mutch as possible, but every marker will be displaied
$markers->setDefaultIconPath('img/'); // Path which will be prepend icon path
/**
* Icon from www folder.
* If default path was not set, setIcon would be '/www/someIcon.png'
*/
$map->addMarkers($markers);
return $map;
}
}
好的,最小的。主持人:
class MapPresenter extends BaseCorePresenter
{
use \Oli\GoogleAPI\TMap;
}
模板:
{block content}
{control map}
{/block}
{block scripts}
{include parent}
<script src="vendor/olicek/google-map-api/client-side/googleMapAPI.js" />
<script src="vendor/olicek/google-map-api/client-side/googleMapApiLoader.js" />
{/block}
配置:
extensions:
map: Oli\GoogleAPI\MapApiExtension
map:
key: your_key # your personal key to google map
zoom: 2
width: 300px # map will 300px width
height: 150px # map will 150px height
coordinates: # you can name keies as you whis or use [49, 15]
lat: 49.8037633
lng: 15.4749126
type: SATELLITE # type of map
markers: # this section will be configured amrkers
bound: on # zoom as mutch as possible, but every marker will be displaied
markerClusterer: on # neer markers group to one cluster
addMarkers: # definitions of markers
- # first marker has no name
coordinates: # the same as map coordinates
sirka: 47
vyska: 15
icon: images/point.png # it will display png image from www/images/point.png
message:
text: Opened message # text of message
autoOpen: on # if it is on, this message will be displaied after map loaded
1: # second marker has name 1
coordinates: [46, 13]
animation: DROP # this marker will has drop animation
title: Hello world
icon: images/point2.png
Prague: # last marker has name Prague
coordinates:
lat: 48
lng: 15
animation: DROP
message:
Closed message
现在,map 无处可寻,页面源代码中的 div(map)如下所示:
<div class="googleMapAPI" data-map="{"position":[49.8037633,15.4749126],"height":"150px","width":"300px","zoom":2,"type":"SATELLITE","scrollable":true,"key":"your_key","bound":true,"cluster":true,"clusterOptions":[],"waypoint":null}" data-basePath="/maps" data-markersFallback="/maps/?do=map-markers"></div>