0

我正在尝试在地图上放置多个标记。为此，我遵循了这个程序

https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete?csw=1

演示

但是在这里，一旦用户开始输入另一个标记，那么第一个标记将被第二个标记替换。为此，我在自动完成函数中初始化了标记，以便在用户输入第二个标记时创建另一个标记。这工作得很好。另一个标记被固定。但是在单击标记时，它不会产生信息窗口，因为信息窗口在自动完成功能内。

我需要所有标记的信息窗口。

<script>
        function initialize() {
            var mapOptions = {
                center: new google.maps.LatLng(-33.8688, 151.2195),
                zoom: 13,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById('map-canvas'),
                    mapOptions);

            var input = /** @type {HTMLInputElement} */(document.getElementById('searchTextField'));
            var autocomplete = new google.maps.places.Autocomplete(input);

            autocomplete.bindTo('bounds', map);

            var infowindow = new google.maps.InfoWindow();


            google.maps.event.addListener(autocomplete, 'place_changed', function() {
                var marker = new google.maps.Marker({
                    map: map
                });
                infowindow.close();
                marker.setVisible(false);
                input.className = '';
                var place = autocomplete.getPlace();
                if (!place.geometry) {
                    // Inform the user that the place was not found and return.
                    input.className = 'notfound';
                    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.
                }
                var address = '';
                if (place.address_components) {
                    address = [
                        (place.address_components[0] && place.address_components[0].short_name || ''),
                        (place.address_components[1] && place.address_components[1].short_name || ''),
                        (place.address_components[2] && place.address_components[2].short_name || '')
                    ].join(' ');
                }
                marker.setIcon(/** @type {google.maps.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(35, 35),
                }));
                if (address.length != 0) {
                    address = place.name + ', ' + address;
                } else {
                    address = place.name;
                }
                marker.setPosition(place.geometry.location);
                marker.setTitle(address);
                marker.setVisible(true);

                infowindow.setContent('<div><strong>' + marker.title + '</strong><br>');
                infowindow.open(map, marker);
            });



        }

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

    </script>

此处 infowindow 将不起作用，因为没有针对此的操作侦听器。所以我写了下面的代码。

       google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, marker);
        });

但它不会起作用，因为标记在这里超出范围变量。这个怎么做？请帮忙

4

1 回答 1

1

使用 createMarker 函数来保存信息窗口内容的函数闭包。

<script type="text/javascript">
var map = null; 
var infowindow = new google.maps.InfoWindow();

function createMarker(place) {
                var marker = new google.maps.Marker({
                    map: map
                });
                // 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.
                }
                var address = '';
                if (place.address_components) {
                    address = [
                        (place.address_components[0] && place.address_components[0].short_name || ''),
                        (place.address_components[1] && place.address_components[1].short_name || ''),
                        (place.address_components[2] && place.address_components[2].short_name || '')
                    ].join(' ');
                }
                marker.setIcon(/** @type {google.maps.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(35, 35),
                }));
                if (address.length != 0) {
                    address = place.name + ', ' + address;
                } else {
                    address = place.name;
                }
                marker.setPosition(place.geometry.location);
                marker.setTitle(address);
                marker.setVisible(true);

                google.maps.event.addListener(marker, 'click', function(e) {
                  infowindow.setContent('<div><strong>' + marker.title + '</strong><br>');
                  infowindow.open(map, marker);
                });
                google.maps.event.trigger(marker, 'click');
}

        function initialize() {
            var mapOptions = {
                center: new google.maps.LatLng(-33.8688, 151.2195),
                zoom: 13,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map-canvas'),
                    mapOptions);

            var input = /** @type {HTMLInputElement} */(document.getElementById('searchTextField'));
            var autocomplete = new google.maps.places.Autocomplete(input);

            autocomplete.bindTo('bounds', map);



            google.maps.event.addListener(autocomplete, 'place_changed', function() {
                infowindow.close();
                input.className = '';
                var place = autocomplete.getPlace();
                if (!place.geometry) {
                    // Inform the user that the place was not found and return.
                    input.className = 'notfound';
                    return;
                }
                createMarker(place);
            });



        }

        google.maps.event.addDomListener(window, 'load', initialize);
</script>

工作示例

于 2013-08-13T13:58:34.527 回答