Question

想知道是否有人可以帮助我，因为我是一个javascript noob。

我的代码工作正常，除了我得到的错误：

ReferenceError：找不到变量：marker

moveMarker函数没有看到变量“marker”。我意识到我已经在一个按键功能中添加了它，这是我可以让它工作的唯一方法，但我不知道如何放置变量以便可以全局访问它。我已将它添加到函数之外，但之后地图根本没有加载。

有人可以帮我一把吗？

提前致谢

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script>
var geocoder;
var map;
var nature = new google.maps.LatLng(45.51948, -73.59488);
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(45.51948, -73.59488);
var mapOptions = {
zoom: 13,
center: latlng
}

map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url: 'http://pa-nature.supermarchepa.com/assets/pa-nature.kmz'
});
ctaLayer.setMap(map);

var natureMarker = new google.maps.Marker({
  position: nature,
  map: map,
  icon: 'http://pa-nature.supermarchepa.com/assets/pa-solo-map.svg',
  title: 'PA Nature'
});

var input = document.getElementById('address');
var autocomplete = new google.maps.places.Autocomplete(input, {
    types: ["geocode"]
});

autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();

google.maps.event.addListener(autocomplete, 'place_changed', function() {
    infowindow.close();
    var place = autocomplete.getPlace();
    if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
    } else {
        map.setCenter(place.geometry.location);
        map.setZoom(14);
    }

    moveMarker(place.name, place.geometry.location);
});

$("input").focusin(function () {
    $(document).keypress(function (e) {
        if (e.which == 13) {
            infowindow.close();
            var firstResult = $(".pac-container .pac-item:first").text();

            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({"address":firstResult }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var marker = new google.maps.Marker({map: map, position: results[0].geometry.location});
                    var lat = results[0].geometry.location.lat(),
                        lng = results[0].geometry.location.lng(),
                        placeName = results[0].address_components[0].long_name,
                        latlng = new google.maps.LatLng(lat, lng);

                    moveMarker(placeName, latlng);
                    $("input").val(firstResult);
                }
            });
        }
    });
});

 function moveMarker(placeName, latlng){
    marker.setPosition(latlng);
    infowindow.setContent(placeName);
    infowindow.open(map, marker);
 }

}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

Answer 1

这是因为范围可变。

    $("input").focusin(function () {
    ...
    var marker = new google.maps.Marker({map: map, position: results[0].geometry.location});
    ...
    });

这被认为是一个jquery函数。 moveMarker是一个不同的功能。你不能简单地调用marker.setPosition(latlng);，因为它是在前一个函数中声明的，并且它不是全局知道的。您需要将标记作为moveMarker函数中的参数传递。

Answer 2

使您的标记变量成为全局变量（如地图和地理编码器变量）。在覆盖之前隐藏标记（如果已存在）。

工作代码段：

var geocoder;
var map;
var marker;
var nature = new google.maps.LatLng(45.51948, -73.59488);

function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(45.51948, -73.59488);
    var mapOptions = {
        zoom: 13,
        center: latlng
    }

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    var ctaLayer = new google.maps.KmlLayer({
        url: 'http://pa-nature.supermarchepa.com/assets/pa-nature.kmz'
    });
    ctaLayer.setMap(map);

    var natureMarker = new google.maps.Marker({
        position: nature,
        map: map,
        icon: 'http://pa-nature.supermarchepa.com/assets/pa-solo-map.svg',
        title: 'PA Nature'
    });

    var input = document.getElementById('address');
    var autocomplete = new google.maps.places.Autocomplete(input, {
        types: ["geocode"]
    });

    autocomplete.bindTo('bounds', map);
    var infowindow = new google.maps.InfoWindow();

    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        infowindow.close();
        var place = autocomplete.getPlace();
        if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
        } else {
            map.setCenter(place.geometry.location);
            map.setZoom(14);
        }

        moveMarker(place.name, place.geometry.location);
    });

    $("input").focusin(function () {
        $(document).keypress(function (e) {
            if (e.which == 13) {
                infowindow.close();
                var firstResult = $(".pac-container .pac-item:first").text();

                var geocoder = new google.maps.Geocoder();
                geocoder.geocode({
                    "address": firstResult
                }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        if ( !! marker && marker.setMap) marker.setMap(null);
                        marker = new google.maps.Marker({
                            map: map,
                            position: results[0].geometry.location
                        });
                        var lat = results[0].geometry.location.lat(),
                            lng = results[0].geometry.location.lng(),
                            placeName = results[0].address_components[0].long_name,
                            latlng = new google.maps.LatLng(lat, lng);

                        moveMarker(placeName, latlng);
                        $("input").val(firstResult);
                    }
                });
            }
        });
    });

    function moveMarker(placeName, latlng) {
        if (!marker || !marker.setPosition) return;  // or create a marker
        marker.setPosition(latlng);
        infowindow.setContent(placeName);
        infowindow.open(map, marker);
    }

}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<input id="address" />
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

ReferenceError：找不到变量：marker

2 个答案: