2017-06-18 38 views
0

編輯:GMAPS API找不到函數

所以基本上我正在做的是,我試圖在我的網站上實現GMAPS api。出於某種原因,api回調無法找到在回調本身之前指定的函數。

回調正在搜索名爲myMap的函數,該函數定義如下。

在函數定義之後,我使用jquery將帶有api src的腳本元素附加到body元素的末尾,以便腳本標記不會在該函數之前運行。

對於某些隨機原因,它確實在函數之前運行,並且無法找到回調工作所需的myMap函數。

我有這樣的代碼:

function myMap(){ 
          var markers = []; 
          var dataLoc = document.getElementById("kaart"); 
          var myLatlng = new google.maps.LatLng(58.88556,25.55722); 
          var mapC = document.getElementById("map-canvas"); 
          var myOptions = { 
          zoom: 7, 
          center: myLatlng, 
          mapTypeId: google.maps.MapTypeId.ROADMAP, 
          disableDoubleClickZoom: true 
          } 
          map = new google.maps.Map(mapC, myOptions); 

          map.addListener("dblclick", function(event) { 
          deleteMarkers(); 
          addMarker(event.latLng); 
          kaart.setAttribute("data-lat", event.latLng.lat()); 
          kaart.setAttribute("data-long", event.latLng.lng()); 
          geocodeLatLng(event.latLng.lat(), event.latLng.lng(), kaart); 
          mapC.className += "disabled"; 
          document.getElementById("editLoc").setAttribute("style","display: block !important;"); 
          }); 
          // Adds a marker to the map and push to the array. 
         function addMarker(location) { 
          var marker = new google.maps.Marker({ 
          position: location, 
          map: map, 
          animation: google.maps.Animation.BOUNCE 
          }); 
          markers.push(marker); 
         } 

         // Sets the map on all markers in the array. 
         function setMapOnAll(map) { 
          for (var i = 0; i < markers.length; i++) { 
          markers[i].setMap(map); 
          } 
         } 

         // Removes the markers from the map, but keeps them in the array. 
         function clearMarkers() { 
          setMapOnAll(null); 
         } 

         // Shows any markers currently in the array. 
         function showMarkers() { 
          setMapOnAll(map); 
         } 

         // Deletes all markers in the array by removing references to them. 
         function deleteMarkers() { 
          clearMarkers(); 
          markers = []; 
         } 
          // Create the search box and link it to the UI element. 
          var input = document.getElementById("pac-input"); 
          var searchBox = new google.maps.places.SearchBox(input); 
          map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 

          // Bias the SearchBox results towards current map\'s viewport. 
          map.addListener("bounds_changed", function() { 
          searchBox.setBounds(map.getBounds()); 
          }); 

          // Listen for the event fired when the user selects a prediction and retrieve 
          // more details for that place. 
          searchBox.addListener("places_changed", function() { 
          var places = searchBox.getPlaces(); 

          if (places.length == 0) { 
           return; 
          } 

          // For each place, get the icon, name and location. 
          var bounds = new google.maps.LatLngBounds(); 
          places.forEach(function(place) { 
           if (!place.geometry) { 
           console.log("Returned place contains no geometry"); 
           return; 
           } 
           var icon = { 
           url: place.icon, 
           size: new google.maps.Size(71, 71), 
           origin: new google.maps.Point(0, 0), 
           anchor: new google.maps.Point(17, 34), 
           scaledSize: new google.maps.Size(25, 25) 
           }; 

           if (place.geometry.viewport) { 
           // Only geocodes have viewport. 
           bounds.union(place.geometry.viewport); 
           } else { 
           bounds.extend(place.geometry.location); 
           } 
          }); 
          map.fitBounds(bounds); 
          }); 
          function geocodeLatLng(lat, long, kuhu) { 
          var geocoder = new google.maps.Geocoder; 
          var latlng = {lat: lat, lng: long}; 
          geocoder.geocode({"location": latlng}, function(results, status) { 
           if (status === "OK") { 
           if (results[0]) { 
            var addressComponents = results[0].address_components; 
            for(i=0;i<addressComponents.length;i++){ 
             var types = addressComponents[i].types 
             if(types=="locality,political"){ 
             kuhu.setAttribute("data-linn", addressComponents[i].long_name); 
             } 
            } 
           } 
           } 
          }); 
          } 

          if (navigator.geolocation) { 
           navigator.geolocation.getCurrentPosition(successFunction); 
          } else { 
           alert(); 
          } 

          function successFunction(position) { 
           var lat = position.coords.latitude; 
           var long = position.coords.longitude; 
           return {lat: lat, long: long}; 
          } 

        } 
        $('body').append('<script src="https://maps.googleapis.com/maps/api/js?key={api key}&callback=myMap&libraries=places"></script>'); 

這裏我添加了標記,並自動完成搜索到我的網站地圖。另外,我正在嘗試獲取用戶的位置。

出於某種原因,瀏覽器控制檯給我一個錯誤:

mc {message: "myMap is not a function", name: "InvalidValueError", stack: "Error↵ at new mc (https://maps.googleapis.com/m…g5xvGcoca0&callback=myMap&libraries=places:137:68"} 

我不知道是什麼原因?我的意思是這個函數已經在回調之前。

注意!之前一樣的確切代碼工作,然後突然一切停止工作。

+0

你會downrate我沒有告訴我什麼,我做錯了? Thx男人。 – drpzxc

+0

在StackOverflow上,它被稱爲downvote,這似乎是不合理的,所以我已upvoted。我猜這是因爲很難說這個問題到底是什麼問題,你之前說過這個問題,你也寫了_「但不知何故回調函數找不到指定的函數。」_ - - 它是哪一個函數確切地說,你的控制檯中是否有任何錯誤? –

+0

這篇文章現在被編輯了,我希望現在可以更容易理解。 – drpzxc

回答

1

好吧,我設法解決它,似乎我的功能不在全局狀態。

我換成這樣的:

function myMap(){ 

與此:

window.myMap = function(){