2014-09-29 3 views
0

Google지도에서 드래그 마커의 기능을 사용하고 있으며, searching.marker가 제대로 드래그되었지만 검색이 수행되지 않습니다.검색 상자가 Google지도에서 작동하지 않습니다.

<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]가 나는 ++ I = 0, 마커 VAR) 용

대신에 마커 = marker [i]; i ++) {

+0

답을 선택하면 사람들이 문제를 해결했음을 알 수 있습니다. – xmux

관련 문제