Question

我正在尝试将谷歌地图放入使用this

的网站

它不会显示地图但会尝试：（源代码）

<section>
<div class="googleMapAPI" data-map="{&quot;position&quot;:[null,null],&      quot;height&quot;:&quot;100%&quot;,&quot;width&quot;:&quot;100%&quot;,&quot;zoom&quot;:7,&quot;type&quot;:&quot;ROADMAP&quot;,&quot;scrollable&quot;:true,&quot;key&quot;:null,&quot;bound&quot;:true,&quot;cluster&quot;:true,&quot;clusterOptions&quot;:[],&quot;waypoint&quot;: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="{&quot;position&quot;:[49.8037633,15.4749126],&quot;height&quot;:&quot;150px&quot;,&quot;width&quot;:&quot;300px&quot;,&quot;zoom&quot;:2,&quot;type&quot;:&quot;SATELLITE&quot;,&quot;scrollable&quot;:true,&quot;key&quot;:&quot;your_key&quot;,&quot;bound&quot;:true,&quot;cluster&quot;:true,&quot;clusterOptions&quot;:[],&quot;waypoint&quot;:null}" data-basePath="/maps" data-markersFallback="/maps/?do=map-markers"></div>

Documentation

Answer 1

可能您需要将密钥添加到您访问的脚本标记中。

<script src="http://maps.googleapis.com/maps/api/js?key=yourKeYwhichWillGoHereAndCanDisplay&sensor=false&extension=.js"></script>

您可以在此处生成密钥：

https://developers.google.com/maps/documentation/javascript/get-api-key

对于浏览器中更精确的打开firebug并尝试运行该页面，可能会抛出一些错误然后你可以发布它。

谷歌在nette网站上映射

1 个答案: