2014-09-29 153 views
0

我正在使用谷歌地图,其中我有拖动标记的功能和searching.marker被正确拖动,但搜索没有执行。谷歌地图搜索框不工作

这是我的工作不代码:

<html> 
<head> 
<style type="text/css"> 
    #map_canvas { 
     height: 450px; 
     width: auto; 
    } 

    #pac-input { 
     background-color: #fff; 
     padding: 0 11px 0 13px; 
     width: 400px; 
     font-family: Roboto; 
     font-size: 15px; 
     font-weight: 300; 
     text-overflow: ellipsis; 
    } 

     #pac-input:focus { 
      border-color: #4d90fe; 
      margin-left: -1px; 
      padding-left: 14px; /* Regular padding-left + 1. */ 
      width: 401px; 
     } 

    .pac-container { 
     font-family: Roboto; 
    } 

    .controls { 
     margin-top: 16px; 
     border: 1px solid transparent; 
     border-radius: 2px 0 0 2px; 
     box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     height: 32px; 
     outline: none; 
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); 
    } 
</style> 
    <script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script> 
     <script type="text/javascript" 
       src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&sensor=false"></script> 
     <script> 

      function initialize() { 
        var userLatLng; 
        var mapDiv = document.getElementById('map_canvas'); 
        var Latitude = document.getElementById('Latitude'); 
        var Longitude = document.getElementById('Longitude'); 
        if (Latitude != null || Longitude != null) { 
         userLatLng = new google.maps.LatLng(document.getElementById("Latitude").value, document.getElementById("Longitude").value); 
        } 
        else { 
         userLatLng = new google.maps.LatLng(37.790234970864, -122.39031314844); 
        } 

        var map = new google.maps.Map(mapDiv, { 
         center: userLatLng, 
         zoom: 3, 
         mapTypeId: google.maps.MapTypeId.ROADMAP 
        }); 

        var marker = new google.maps.Marker({ 
         position: userLatLng, 
         map: map, 
         title: 'Default Marker', 
         draggable: true 
        }); 

        google.maps.event.addListener(marker, 'drag', function (event) { 
         document.getElementById('Latitude').value = event.latLng.lat(); 
         document.getElementById('Longitude').value = event.latLng.lng(); 
        }); 

        google.maps.event.addListener(marker, 'dragend', function (event) { 
         document.getElementById('Latitude').value = event.latLng.lat(); 
         document.getElementById('Longitude').value = event.latLng.lng(); 
        }); 

        // Create the search box and link it to the UI element. 
        var input = (document.getElementById('pac-input')); 
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 

        var searchBox = new google.maps.places.SearchBox((input)); 

        // [START region_getplaces] 
        // Listen for the event fired when the user selects an item from the 
        // pick list. Retrieve the matching places for that item. 
        google.maps.event.addListener(searchBox, 'places_changed', function() { 
         var places = searchBox.getPlaces(); 

         if (places.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(); 
         for (var i = 0, place; place = places[i]; i++) { 
          var image = { 
           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(25, 25) 
          }; 

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

          latitude = marker1.getPosition().lat(); 
          longitude = marker1.getPosition().lng(); 

          markers.push(marker1); 

          bounds.extend(place.geometry.location); 
         } 
         map.fitBounds(bounds); 

        }); 

        google.maps.event.addListener(map, 'bounds_changed', function() { 
         var bounds = map.getBounds(); 
         searchBox.setBounds(bounds); 
        }); 
        return true; 
       } 
      google.maps.event.addDomListener(window, 'load', initialize); 
     </script> 
    </head> 
<body> 
    <div id="map_canvas"></div> 
     <input id="pac-input" class="controls" type="text" placeholder="Search Box"> 
</body> 
</html> 

请建议为什么搜索框不工作,而不是扩大too.Error没有产生。

回答

1

我得到了我的答案! 在地方的

为(VAR I = 0,标记;标记=标记物[I];我++){

写入下面

为(VAR I = 0,标记;标记= marker [i]; i ++){

+0

选择你的答案为接受,所以人们会知道你解决了你的问题。 – xmux 2014-09-29 12:48:45