添加标记和infowindow没有页面刷新

时间:2013-08-13 12:29:10

标签: php javascript google-maps-api-3 google-maps-markers

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

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

Demo

但是在这里,一旦用户开始为另一个标记键入,那么第一个标记将被第二个标记替换。为此,我在自动完成功能中初始化了标记,以便在用户输入第二个标记时创建另一个标记。这很好。另一个标记是固定。但是在点击标记时,由于infowindow在自动完成功能中,它不会产生信息。

我需要infowindow所有标记。

<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);
        });

但它不会起作用,因为标记超出了范围变量。这该怎么做?请帮忙

1 个答案:

答案 0 :(得分:1)

使用createMarker函数在infowindow内容上保存函数闭包。

<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>

working example