Question

上下文：我正在asp.net上创建一个网络应用程序，其中包含Google地图以搜索该位置。我有两个名为From和To的文本框，可用于自动完成搜索。

问题：只有To文本框在地图上创建了标记，但我希望两个文本框仅在1个地图上创建标记。只是告诉两个文本框都在使用自动完成搜索，但仅创建由To文本框搜索的位置的标记，即第二个。

其他信息：我不想要静态纬度和标准的不同标记。经度。我希望基于文本框中的搜索来使用不同的标记。

守则：

        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
        <script type="text/javascript">
            function LoadGoogleMAP() {

                var markers = [];
                var map = new google.maps.Map(document.getElementById('map'), {
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    zoom: 8

                });

                var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-33.8902, 151.1759),
  new google.maps.LatLng(-33.8474, 151.2631));
                map.fitBounds(defaultBounds);

                // Create the search box and link it to the UI element.  

                var places = new google.maps.places.Autocomplete(document.getElementById('Text1'));
                google.maps.event.addListener(places, 'place_changed', function () {
                    var place2 = places.getPlace();
                    var address = place2.formatted_address;
                    var latitude = place2.geometry.location.A;
                    var longitude = place2.geometry.location.F;
                    var mesg = "Address: " + address;
                    mesg += "\nLatitude: " + latitude;
                    mesg += "\nLongitude: " + longitude;
                    alert(mesg);




                    if (place2.length == 0) {
                        return;
                    }
                    for (var i = 0, marker; marker = markers[i]; i++) {
                        marker.setMap(null);
                    }

                    // For each place, get the icon, place name, and location.  
                    markers = [];
                    var bounds = new google.maps.LatLngBounds();


                    // Create a marker for each place.  
                    var marker = new google.maps.Marker({
                        map: map,
                        title: place2.name,
                        position: place2.geometry.location
                    });

                     markers.push(marker);

                    bounds.extend(place2.geometry.location);

                    map.fitBounds(bounds);
                });



                // current map's viewport.  
                google.maps.event.addListener(map, 'bounds_changed', function () {
                    var bounds = map.getBounds();
                    place2.setBounds(bounds);
                });
            }

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

    //for second textBox named “To”
        <script type="text/javascript">
            function LoadGoogleMAP1() {

                var markers = [];
                var map = new google.maps.Map(document.getElementById('map'), {
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    zoom: 8

                });

                var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-33.8902, 151.1759),
  new google.maps.LatLng(-33.8474, 151.2631));
                map.fitBounds(defaultBounds);


                var places = new google.maps.places.Autocomplete(document.getElementById('Text2'));
                google.maps.event.addListener(places, 'place_changed', function () {
                    var place2 = places.getPlace();
                    var address = place2.formatted_address;
                    var latitude = place2.geometry.location.A;
                    var longitude = place2.geometry.location.F;
                    var mesg = "Address: " + address;
                    mesg += "\nLatitude: " + latitude;
                    mesg += "\nLongitude: " + longitude;
                    alert(mesg);
                    //});



                    if (place2.length == 0) {
                        return;
                    }
                    for (var i = 0, marker; marker = markers[i]; i++) {
                        marker.setMap(null);
                    }

                    // For each place, get the icon, place name, and location.  
                    markers = [];
                    var bounds = new google.maps.LatLngBounds();


                    // Create a marker for each place.  
                    var marker = new google.maps.Marker({
                        map: map,
                        title: place2.name,
                        position: place2.geometry.location
                    });

                    markers.push(marker);

                    bounds.extend(place2.geometry.location);

                    map.fitBounds(bounds);
                });



                // current map's viewport.  
                google.maps.event.addListener(map, 'bounds_changed', function () {
                    var bounds = map.getBounds();
                    place2.setBounds(bounds);
                });
            }

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







        </script>

Answer 1

好像你正在创建地图两次......而不是那样，你应该在SAME地图中创建2个google.maps.event.addListener个对象，2个infowindows，2个标记，2个google.maps.event.addListener(autocomplete, 'place_changed'个侦听器。

我在这里有一个工作的例子，希望它有所帮助。

http://jsfiddle.net/5vhwe1hk/

谷歌地图Asp.net具有不同的自动搜索框和不同的标记

1 个答案: