doucheng3407 2013-08-13 12:29
浏览 65
已采纳

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

I'm trying to place multiple markers on a map. For this, I followed this procedure

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

Demo

But here, once user starts typing for another marker, then first marker is getting replaced by the second marker. For this, I initialized the marker inside autocomplete function so that it creates another marker as user enters second one. This worked fine. Another marker is getting pinned. But onclicking the marker, it will not produce infowindow since the infowindow is inside autocomplete function.

I need infowindow for all markers.

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

Here infowindow will not work since there is no action listener for this. so I wrote the below code.

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

But it wont work as marker is out of scope variable here. How to do this? Please help

  • 写回答

1条回答 默认 最新

  • dongqing4774 2013-08-13 13:58
    关注

    Use a createMarker function to hold function closure on the infowindow content.

    <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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 我这模型写的不对吗?为什么lingo解出来的下面影子价格这一溜少一个变量
  • ¥50 树莓派安卓APK系统签名
  • ¥15 maple软件,用solve求反函数出现rootof,怎么办?
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波