Question

编辑：

基本上我正在做的是，我试图在我的网站上实施GMAPS api。由于某种原因，api回调无法找到在回调本身之前指定的函数。

Callback正在搜索名为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"}

我不确定为什么？我的意思是函数已经在回调之前。

NB！之前完全相同的代码，然后突然一切都停止了。

Answer 1

好吧，我设法修复它，似乎我的功能不在全球状态。

我取而代之：

function myMap(){

用这个：

window.myMap = function(){

GMAPS API无法找到该功能

1 个答案: