Question

我在Google上开了一个帐户，然后我去https://console.developers.google.com/cloud-resource-manager创建了一个使用Google Maps静态API的密钥。

我使用了Key，现场页面以及AMP页面，但在AMP上工作正常，在普通的HTML页面上，Google的API会返回错误。

使用Chrome的Developer Tool进行调查，它会返回MissingKeyMapError，因为相同的密钥在网站的AMP版本上运行，所以没有任何意义。

我调试网页（由PHP生成），我看到：所有地理数据都是通过CURL等从Google正确检索的......

只是谷歌的Javascript没有返回地图......

我附上了Chrome控制台的错误代码截图：

下面是变量contanining my Key（用setup.php文件编写）

$ key_gigs =＆＃34; _____________ MYKEY ______________＆＃34;;

此处CLASS我用于AMP以及普通HTML页面：

<?php
class geo {

    public function CoOrdinates($address_) {

    global $key_gigs; // Setup.php
    //echo $address_; echo $key_gigs; exit; // debug purpose
    $curl_ = curl_init();
    $url_map = "https://maps.googleapis.com/maps/api/geocode/json?address=$address_&sensor=false&key=$key_gigs";
    curl_setopt($curl_, CURLOPT_URL, $url_map);
    curl_setopt($curl_, CURLOPT_HEADER, false);
    curl_setopt($curl_, CURLOPT_FOLLOWLOCATION, true);
    curl_setopt($curl_, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl_, CURLOPT_ENCODING, "");
    $curlData = curl_exec($curl_);
    curl_close($curl_);

    $data = json_decode($curlData, true);
    //print_r($data);   exit; // debug purpose
    $ret_ = [
        'city' => $data["results"][0]["address_components"][2]["long_name"],
        'country' => $data["results"][0]["address_components"][5]["long_name"],
        'iso' => strtolower($data["results"][0]["address_components"][5]["short_name"]),

        'lat' => $data["results"][0]["geometry"]["location"]["lat"],
        'lon' => $data["results"][0]["geometry"]["location"]["lng"],

        'time-zone' => $this->TimeZone($data["results"][0]["geometry"]["location"]["lat"],$data["results"][0]["geometry"]["location"]["lng"]),
    ];
    //print_r($ret_); exit; // debug purpose
    return $ret_ ;
    }

    public function TimeZone($lat_,$lon_) {
        //echo $lat_." ".$lon_; exit;

        $query_json = "https://maps.googleapis.com/maps/api/timezone/json?location={$lat_},{$lon_}&timestamp=0&sensor=false";
        $json_timezone = file_get_contents($query_json);
        $data_time_zone = json_decode($json_timezone, true);
        return $time_zone = $data_time_zone["timeZoneId"];
    }
}
?>

这里是生成页面的PHP代码的感兴趣部分（它位于页面的预处理器中）

$address = add_plus($Address.", ".$Number.",".$Code."+".$City.",".$Country);

// Creates and manages object from Class geo();
$geo = new geo();
$coordinates = $geo->CoOrdinates($address);
$city = $coordinates['city'];
$country = $coordinates['country'];
$iso = $coordinates['iso'];
$lat = $coordinates['lat'];
$lon = $coordinates['lon'];
$time_zone = $coordinates['time-zone'];
// GEO Debug
//echo $city." ".$country." ".$iso." ".$lat." ".$lon." ".$time_zone; exit;

这里是Google JS的META标签。以下代码行位于页面本身：

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>

这里是可视化代码。 $ venue等变量由页面的预处理器生成，数据取自dB

    <!-- Map style="width: 60vw; height: 33.8vw;" -->
    <section>
            <h2 class="h_special"><? echo $Name; ?> - EVENTO</h2>
            <div id="gmap" style=""></div>
            <script type="text/javascript">
        var myLatLng = {lat: <? echo $lat; ?>, lng: <? echo $lon; ?>};
        var myOptions = {
            zoom: <? echo $zoom; ?>,
            center: new google.maps.LatLng(<? echo $lat; ?>, <? echo $lon; ?>),
            // mapTypeId: google.maps.MapTypeId.ROADMAP
            // mapTypeId: google.maps.MapTypeId.SATELLITE
            mapTypeId: google.maps.MapTypeId.HYBRID
            // mapTypeId: google.maps.MapTypeId.TERRAIN
        };
        var map = new google.maps.Map(document.getElementById("gmap"), myOptions);
        var marker = new google.maps.Marker({position: myLatLng, map: map, title: '<? echo $venue; ?>'});
            </script>
    </section>

Answer 1

正如Javascript API error code documentation屏幕截图所示，MissingKeyMapError出现是因为您在Javascript API加载网址中缺少API密钥而与Static Maps API无关：

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>

您需要向该网址添加API密钥，如Getting Started documentation所述。您还do not need the sensor parameter：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script>

Google Maps API：静态地图返回错误，没有可用的地图

1 个答案: