首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >相同页面上的两个不同的Google,但是get您已经在此页面错误上多次包含了Google

相同页面上的两个不同的Google,但是get您已经在此页面错误上多次包含了Google
EN

Stack Overflow用户
提问于 2017-01-02 09:52:17
回答 2查看 6.4K关注 0票数 3

我试图在同一个页面中包含两个不同的Google,但是我得到了一个错误

您已经多次在此页面中包含Google。

具体来说,我试图使用自动完成和距离矩阵API从谷歌。我只能让一个或另一个在任何一个页面上工作,因为我不能两次调用maps.googleapis.com。但是,我必须调用链接的不同扩展(即callback=initAutocompletecallback=initMap),因此我不知道如何绕过它。这两个链接如下:

代码语言:javascript
代码运行次数:0
运行
复制
<script src="https://maps.googleapis.com/maps/api/js?key=MyPrivateKey=&libraries=places&callback=initAutocomplete" async defer></script>

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

有人知道如何使用单个脚本调用来访问autocomplete和Map吗?谢谢!

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-01-02 10:02:11

通常,当Google (根据请求加载所有库)完全加载并可以使用时,会调用callback函数。因此,您可以将initAutoComplete放在initMap中,例如

代码语言:javascript
代码运行次数:0
运行
复制
<script>
   var map;
   function initMap(){
      // initiate a new map instance. 
      map = new google.maps.Map(document.getElementById('map'), {
          zoom: 12,
          center: {lat: 15.3647, lng: 75.1240}
      });
      initAutocomplete(); // initiate Auto complete instance 
   }
   fucntion initAutocomplete(){
         // code to handle autocomplete
   }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=<key>&libraries=places&callback=initMap" async defer></script>
票数 1
EN

Stack Overflow用户

发布于 2021-02-04 15:28:40

用于聚焦函数并替换mapinit函数中的输入值

代码语言:javascript
代码运行次数:0
运行
复制
   function country() {
            mapInp = document.getElementById("country");
            initMap(mapInp)`enter code here`;
        }
        //   feedback form city search
        function city() {
            mapInp = document.getElementById("showcity");
            initMap(mapInp);
        };
      
    //   main map called in both city and country
        function initMap(mapInp) {
          var country;
          
            const map = new google.maps.Map(document.getElementById("map3"), {
              center: { lat: -33.8688, lng: 151.2195 },
              zoom: 13,
            });
            
    
             const input = mapInp;
            //  var autocomplete = new google.maps.places.Autocomplete(input, options);
            const card = document.getElementById("pac-card");
            // Zconst input = document.getElementById("showcity");
            map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);
            const autocomplete = new google.maps.places.Autocomplete(input);
            // Bind the map's bounds (viewport) property to the autocomplete object,
            // so that the autocomplete requests use the current map bounds for the
            // bounds option in the request.
            autocomplete.bindTo("bounds", map);
            // Set the data fields to return when the user selects a place.
            autocomplete.setFields([
              "address_components",
              "geometry",
              "icon",
              "name",
            ]);
            const infowindow = new google.maps.InfoWindow();
            const infowindowContent = document.getElementById("infowindow-content");
            infowindow.setContent(infowindowContent);
            const marker = new google.maps.Marker({
              map,
              anchorPoint: new google.maps.Point(0, -29),
            });
            autocomplete.addListener("place_changed", () => {
              infowindow.close();
              marker.setVisible(false);
              const place = autocomplete.getPlace();
              if (!place.geometry) {
                // User entered the name of a Place that was not suggested and
                // pressed the Enter key, or the Place Details request failed.
                window.alert(
                  "No details available for input: '" + place.name + "'"
                );
                return;
              }
              // If the place has a geometry, then present it on a map.
              if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);
              } else {
                map.setCenter(place.geometry.location);
                map.setZoom(17); // Why 17? Because it looks good.
              }
              marker.setPosition(place.geometry.location);
              marker.setVisible(true);
        
      }
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/41424509

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档