具有不同自动搜索框和不同标记的 Google Maps Asp.net

Question

上下文：我正在asp.net 上制作一个网络应用程序，其中包含用于搜索位置的谷歌地图。我有 2 个名为 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 个信息窗口、2 个标记、2 个 google.maps.event.addListener(autocomplete, 'place_changed' 侦听器。

我在这里有一个工作示例，希望对您有所帮助。

http://jsfiddle.net/5vhwe1hk/