堆棧內存溢出
  簡體   English   中英

將 API 密鑰添加到舊的 Google Maps API 項目后出現“多次使用 API 密鑰”錯誤

[英]"using API key multiple times" error after adding API Key to an old Google Maps API project

 原文  2019-07-25 17:56:03  5   1    javascript/ google-maps/ google-maps-api-3/ google-maps-markers/ zepto

問題描述

終於解決了我在 2014 年創建的谷歌地圖上眾所周知的問題“API 密鑰”錯誤（在你需要谷歌地圖 API 的 API 密鑰之前）。 我獲得了一個密鑰並將其放在<head> （顯然用真正的密鑰代替了 MY_API_KEY）：

    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap">
    </script>

<body onLoad="initMap()">舊的<body onLoad="initMap()">只留下<body>標簽。

地圖，過去只是警告我 API 密鑰，但現在幾乎完全失敗（顯示背景地圖，但沒有任何標記應該在上面），首先是 Chrome 開發工具中的一個錯誤，說我是多次使用 API 密鑰（“您在此頁面上多次包含 Google Maps JavaScript API。這可能會導致意外錯誤。”），然后沿着這條線出現很多錯誤：

InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number
InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama

很多代碼都是基於帶有標簽的標記。

沿着這條線還有一堆信息窗口：

var intertidalObj = {
    "Intertidal":{name:"Intertidal", infowindow: new google.maps.InfoWindow({maxWidth:520, position: new google.maps.LatLng(48.69176776907712, -122.90861248970032),
      content: "<p class='iw'><strong>Intertidal Community</strong><br>The intertidal zone, also known as the foreshore and seashore, is the area that is above water at low tide and under water at high tide (in other words, the area between tide marks). This area can include many different types of habitats, with many types of animals, such as sea stars, sea cucumbers, sea urchins, crabs, barnacles, octopus, squid, anemones and worms.<br><br><a href='http://www.kwiaht.org'  target='_blank'>Kwiáht</a> and <a href='http://www.irthlingz.org'  target='_blank'>Irthlingz</a> are currently working with Laura Tidwell’s Orcas Middle School marine science students to create an interactive map of Indian Island's rich and fascinating intertidal community.<br><br><img class='pic' src='http://www.monumentalmap.com/monumentalmap/indian_island/intertidal.jpg'><br>Sources: <a href='https://sites.google.com/site/indianislandproject/identification-guides/birds' target='_blank'>Kwiaht</a> and <a href='http://en.wikipedia.org/wiki/Intertidal_zone' target='_blank'>Wikipedia</a></p><br>"}),coordinates:[48.69176776907712, -122.90861248970032]}
        };

google.maps.event.addListener(intertidalObj["Intertidal"].infowindow,'closeclick',function(){
    document.getElementById("Intertidal").checked = false;
});

我還嘗試將async defer放在<body>而不是<head> 。 那沒有用，從我的谷歌搜索來看， <head>似乎是正確的地方。 有什么建議？ 我不知道還有其他選擇可以嘗試。

編輯：@geocodezip：您的建議似乎是正確的，但是在我刪除了您建議的行之后，我在 Chrome 開發工具中遇到了以下錯誤：

Uncaught ReferenceError: google is not defined
    at eval (eval at <anonymous> (markerwithlabel.min.js:1), <anonymous>:1:641)
    at markerwithlabel.min.js:1
VM25:1 Uncaught (in promise) TypeError: MarkerLabel_.getSharedCross is not a function
    at new MarkerLabel_ (eval at <anonymous> (markerwithlabel.min.js:1), <anonymous>:1:601)
    at new MarkerWithLabel (eval at <anonymous> (markerwithlabel.min.js:1), <anonymous>:1:9546)
    at initMap ((index):171)
    at js?key=MY_API_KEY&callback=initMap:125
    at js?key=MY_API_KEY&callback=initMap:125

由於它說google未定義，我想也許我需要將async defer移到<head>部分的頂部。 我試過了，並得到以下錯誤：

monumentalmap.com/:1 Uncaught (in promise) 
Wc {message: "initMap is not a function", name: "InvalidValueError", stack: "Error↵    at new Wc (https://maps.googleapis.com/m…&callback=initMap:125:108"}
message: "initMap is not a function"
name: "InvalidValueError"

目前，功能較少的在<head>頂部附近有defer async ，並且開發控制台顯示：

VM511:1 Uncaught ReferenceError: google is not defined
    at eval (eval at <anonymous> (markerwithlabel.min.js:1), <anonymous>:1:641)
    at markerwithlabel.min.js:1
(anonymous) @ VM511:1
(anonymous) @ markerwithlabel.min.js:1
VM511:1 Uncaught (in promise) TypeError: MarkerLabel_.getSharedCross is not a function
    at new MarkerLabel_ (eval at <anonymous> (markerwithlabel.min.js:1), <anonymous>:1:601)
    at new MarkerWithLabel (eval at <anonymous> (markerwithlabel.min.js:1), <anonymous>:1:9546)

我有一種感覺，我只需要將async defer放在正確的位置。 但不確定那是哪里。

1 個解決方案

解決方案1
 0  2019-08-02 06:31:45

最終對我有用的是：

1）消除markerwithlabel.min.js

2）創建對象文字（ fishObj在以下示例代碼），其特性是一群對象常量（例如lingcod ， threespine stickleback ， tubesnout ， northern clingfish和Pacific sand lance下面-在現實中也有很多更多的這些） , 每個都有三個屬性： name ， infowindow和coordinates （緯度/經度）

3) 使用 for/in 循環迭代“容器”對象 ( fishObj ) 和普通的new google.maps.Marker （而不是我之前使用的new MarkerWithLabel ）來實例化地圖上的對象，同時向每個對象添加label屬性（以及其他一些屬性）。 （這些屬性中的大多數是我以前的方法遺留下來的，有些可能不再需要或有任何影響。有效的一個是創建工具提示的title 。）

4) 繼續使用async defer ：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap">
    </script>

在此處查看地圖： http : //monumentalmap.com.s3-website-us-west-2.amazonaws.com/

下面是一些示例代碼：

var fishObj = {
    "lingcod":{name:"lingcod",infowindow: new google.maps.InfoWindow({maxWidth:340,content: "<p class='iw'>Only juveniles lingcod have been observed in Fishing Bay. Jaws have small pointed teeth interspersed with larger fang-like teeth. Lingcod are voracious predators, said to eat anything they can get into their mouths, including invertebrates and many species of fish.</p><img class='pic'  src='http://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Lingcod1.JPG/320px-Lingcod1.JPG'><br>Sources: <a href='https://sites.google.com/site/indianislandproject/identification-guides/fish-1/scorpaeniformes' target='_blank'>Kwiaht</a> and <a href='http://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Lingcod1.JPG/320px-Lingcod1.JPG' target='_blank'>Wikimedia</a>"}),coordinates:[48.69352058493678, -122.90759325027466]},
    "threespine stickleback":{name:"threespine stickleback",infowindow: new google.maps.InfoWindow({maxWidth:420, content: "<p class='iw'>A small fish characterized by a row of three dorsal spines in front of the dorsal fin. Both adults and juveniles have been observed in Fishing Bay.</p><img class='pic'  src='http://1.bp.blogspot.com/_ODUGlGhaapI/TDmWSpDD6QI/AAAAAAAASbQ/HTrhqQOYYxI/s400/three+spined+stickleback.JPG'><br>Sources: <a href='https://sites.google.com/site/indianislandproject/identification-guides/fish-1/gasterosteiformes' target='_blank'>Kwiaht</a> and <a href='http://1.bp.blogspot.com/_ODUGlGhaapI/TDmWSpDD6QI/AAAAAAAASbQ/HTrhqQOYYxI/s400/three+spined+stickleback.JPG' target='_blank'>Wikimedia</a>"}),coordinates:[48.69369409272266,-122.90797412395477]},
    "tubesnout":{name:"tubesnout",infowindow: new google.maps.InfoWindow({maxWidth:420 , content: "<p class='iw'>A small fish characterized by a row of three dorsal spines in front of the dorsal fin. Both adults and juveniles have been observed in Fishing Bay.</p><img class='pic' src='https://lh3.googleusercontent.com/-JyYhERNz7_4/TfO3ylAdb0I/AAAAAAAAAeY/fKS4T8oBHQ0/s400/Tubesnout%2Bcloseup.JPG'><br>Sources: <a href='https://sites.google.com/site/indianislandproject/identification-guides/fish-1/gasterosteiformes' target='_blank'>Kwiaht</a> and <a href='http://1.bp.blogspot.com/_ODUGlGhaapI/TDmWSpDD6QI/AAAAAAAASbQ/HTrhqQOYYxI/s400/three+spined+stickleback.JPG' target='_blank'>Wikimedia</a>"}),coordinates:[48.69282300696724,-122.90957272052765]},
    "northern clingfish":{name:"northern clingfish",infowindow: new google.maps.InfoWindow({maxWidth:420 , content: "<p class='iw'>In this unique fish, the pelvic fin has evolved into a suction cup which the clingfish uses to latch onto rocks or kelp. The clingfish uses its suction cup as an anchor, prying prey off rocks with its head and bottom teeth. The suction cup also serves as a reservoir, storing water during times of low tide. </p><img class='pic' src='https://lh6.googleusercontent.com/-pgwRs03MAyc/Tg61AIfX5BI/AAAAAAAAAiI/UVGsGulEog8/s400/northern%2Bclingfish.png'><br>Source: <a href='https://sites.google.com/site/indianislandproject/identification-guides/fish-1/gobiesociformes' target='_blank'>Kwiaht</a>"}),coordinates:[48.692776973560925, -122.90755569934845]},
      "Pacific sand lance":{name:"Pacific sand lance",infowindow: new google.maps.InfoWindow({maxWidth: 500, content: "<p class='iw'>The sand lance derives its name from its slender body and pointed snout. The family name (and genus name, <em>Ammodytes</em>) means 'sand burrower', which describes the sand lance's habit of burrowing into sand to avoid tidal currents. Sand lances compose 35% of the diet of juvenile salmon. Juvenile chinook salmon depend on the sand lance for 60% of their diet. Only juvenile sand lances have been observed in Fishing Bay. </p><img class='pic' src='http://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Ammodytes_hexapterus.jpg/480px-Ammodytes_hexapterus.jpg'> <br>Sources: <a href='https://sites.google.com/site/indianislandproject/identification-guides/fish-1/perciformes' target='_blank'>Kwiaht</a> and <a href='http://en.wikipedia.org/wiki/Sand_lance' target='_blank'>Wikipedia</a>"}),coordinates:[48.69411546619574, -122.90785610675812]}
 };

var fishMarkers=[];
var n = 0;  
for (var j in fishObj) {
  var loc = new google.maps.LatLng(fishObj[j].coordinates[0],fishObj[j].coordinates[1]);
fishMarkers[n] = new google.maps.Marker({
     position: loc,
     map: map,
     icon: fishIcon,
     draggable: true,
     raiseOnDrag: true,
     labelContent: fishObj[j].name,
     title: fishObj[j].name,  
     label: {text:fishObj[j].name, color: "#eb3a44", fontWeight: "bold", 
     fontSize: "16px"},
     labelAnchor: new google.maps.Point(10,15)
    });

希望這可以幫助面臨同樣問題的人。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用Vaadin將Google Maps API密鑰實現到Java Project中 使用沒有密鑰的Google Maps API 關於關鍵API谷歌地圖 沒有密鑰的Google Maps API？ 獲取API密鑰-Google Maps Javascript API Google 地圖 API 錯誤：此 API 密鑰無權使用此服務或 API。 地方 API 錯誤：ApiTargetBlockedMapError “您在此頁面上多次包含 Google Maps API”錯誤 使用Wordpress模板中的API鍵調用來調用多個Google地圖 Google Maps Javascript API v3錯誤消息“密鑰已禁用” 確定Google Maps API在運行時是否使用了無效的密鑰
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM