Question

抱歉我的英语不好。

我不知道为什么，但我的网站上的谷歌地图API在Safari浏览器中不起作用..在其他浏览器（Firefox，Chrome，Opera）中它的工作。也许你知道我做错了什么？我的js代码：

locations.tpl：

{include file="helpers/menu.tpl"}
<div id="content">
    <div id="my-map"> </div>
</div>

maps.js：

function init(locations, icon, id){
   var map = new google.maps.Map(document.getElementById(id),{
    zoom: 15,
    center: new google.maps.LatLng(25.204120, 55.274700),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: true,
    streetViewControl: false,
    panControl: false,
    zoomControlOptions: {position: google.maps.ControlPosition.LEFT_BOTTOM}
  });
  var infowindow = new google.maps.InfoWindow({
    maxWidth: 170
  });
  var markers = new Array();
  for (var i = 0; i < locations.length; i++){
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
      icon: icon
    });
    markers.push(marker);
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
      };
    })(marker, i));
  }
  autoCenter();
  function autoCenter() {
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < markers.length; i++){bounds.extend(markers[i].position);}
    map.fitBounds(bounds);
  }
}

index.tpl：

<script src="https://maps.googleapis.com/maps/api/js?language=en"> </script>
<script type="text/javascript" src="{$config.views_url}js/maps.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
      var locations = {$locations};
      var icon = "{$config.views_url}images/icon2.png";    //icon.png
      //locations, icon, html id
      init(locations, icon, 'my-map');

    });
</script>

locations.class.tpl：

<?php

class locations extends controller {

    function locations() {
        parent::controller("locations");

        $this->fields = array(
            "created" => "created",
            "location" => "string",
            "coordx" => "string",
            "coordy" => "string",
            "descript" => "string",
        );

        //$this->createTableStructure();
    }

    function getLocations(){
        global $coreSQL;
        $location = $coreSQL->queryValue('SELECT CONCAT("[", GROUP_CONCAT(CONCAT("[`",descript,"`"), CONCAT(",`",coordx,"`"), CONCAT(",`",coordy), "`]"),"]") AS locations FROM locations');
        return $location;
    }
}

?>

default.css：

#content{
        margin:0 auto;
    position:relative;
        width:1280px;
    height:1775px;
    background-image: url(../images/sand.png), url(../images/bg.png);
    background-repeat: no-repeat, no-repeat;
        background-position: 0 100%, 50% 50%;   
}

#my-map{
        border:10px solid white;
        width: 800px;
        height: 600px;
        background-color: #CCC;
        margin-left:auto;
        margin-right:auto;
        margin-top:50px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.46);
      }

Answer 1

哦，我找到了答案。我不知道为什么但是Safari给了我一个关于`simbol的错误...所以我改变了locations.class.tpl所有那些simbols由/＆＃39;现在一切正常。

谷歌地图在safari中不起作用（灰色矩形）

1 个答案: