2016-04-08 26 views

cevap

-1

yapabilirsiniz kullanıyorum enlem ve boylam müşterinin yakalamak sevkıyat adresi formu magento üzerinde magento bir sayfa ödeme sayfasında google harita eklemek istediğiniz Müşterinin boylamı ve enlemini almak için Google Maps Geocoding API'u entegre edin.

Coğrafi kodlama bir işaretçileri yerleştirmek için kullanabileceğiniz, (-122,083739 enlem ve boylam 37,423021 gibi) coğrafi koordinatları içine ("1600 Amphitheatre Parkway, Mountain View, CA" gibi) adreslerini dönüştürme işlemidir haritayı veya haritayı konumlandırın.

Numune Talebi:

https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=YOUR_API_KEY 

Numune Yanıtı:

<GeocodeResponse> 
<status>OK</status> 
<result> 
    <type>street_address</type> 
    <formatted_address>1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA</formatted_address> 
    <address_component> 
    <long_name>1600</long_name> 
    <short_name>1600</short_name> 
    <type>street_number</type> 
    </address_component> 
    <address_component> 
    <long_name>Amphitheatre Pkwy</long_name> 
    <short_name>Amphitheatre Pkwy</short_name> 
    <type>route</type> 
    </address_component> 
    <address_component> 
    <long_name>Mountain View</long_name> 
    <short_name>Mountain View</short_name> 
    <type>locality</type> 
    <type>political</type> 
    </address_component> 
    <address_component> 
    <long_name>San Jose</long_name> 
    <short_name>San Jose</short_name> 
    <type>administrative_area_level_3</type> 
    <type>political</type> 
    </address_component> 
    <address_component> 
    <long_name>Santa Clara</long_name> 
    <short_name>Santa Clara</short_name> 
    <type>administrative_area_level_2</type> 
    <type>political</type> 
    </address_component> 
    <address_component> 
    <long_name>California</long_name> 
    <short_name>CA</short_name> 
    <type>administrative_area_level_1</type> 
    <type>political</type> 
    </address_component> 
    <address_component> 
    <long_name>United States</long_name> 
    </viewport> 
    </geometry> 
    <place_id>ChIJ2eUgeAK6j4ARbn5u_wAGqWA</place_id> 
</result> 
</GeocodeResponse></address_component> 
    <address_component> 
    <long_name>94043</long_name> 
    <short_name>94043</short_name> 
    <type>postal_code</type> 
    </address_component> 
    <geometry> 
    <location> 
    <lat>37.4217550</lat> 
    <lng>-122.0846330</lng> 
    </location> 
    <location_type>ROOFTOP</location_type> 
    <viewport> 
    <southwest> 
    <lat>37.4188514</lat> 
    <lng>-122.0874526</lng> 
    </southwest> 
    <northeast> 
    <lat>37.4251466</lat> 
    <lng>-122.0811574</lng> 
    </northeast> 
    </viewport> 
    </geometry> 
    <place_id>ChIJ2eUgeAK6j4ARbn5u_wAGqWA</place_id> 
</result> 
</GeocodeResponse> 
0
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script> 

<div id="map_canvas" style="height: 500px;width: 100%; margin: 0.6em;"></div> 



<!--Script Starts Here--> 
<script> 
    jQuery(function() { 
    var lat = 44.88623409320778, 
     lng = -87.86480712897173, 
     latlng = new google.maps.LatLng(lat, lng), 
     image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png'; 

    //zoomControl: true, 
    //zoomControlOptions: google.maps.ZoomControlStyle.LARGE, 

    var mapOptions = { 
      center: new google.maps.LatLng(lat, lng), 
      zoom: 13, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      panControl: true, 
      panControlOptions: { 
       position: google.maps.ControlPosition.TOP_RIGHT 
      }, 
      zoomControl: true, 
      zoomControlOptions: { 
       style: google.maps.ZoomControlStyle.LARGE, 
       position: google.maps.ControlPosition.TOP_left 
      } 
     }, 
     map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions), 
     marker = new google.maps.Marker({ 
      position: latlng, 
      map: map, 
      icon: image 
     }); 

    var input = document.getElementById('billing:street2'); 
    var autocomplete = new google.maps.places.Autocomplete(input, { 
     types: ["geocode"] 
    }); 

    autocomplete.bindTo('bounds', map); 
    var infowindow = new google.maps.InfoWindow(); 

    google.maps.event.addListener(autocomplete, 'place_changed', function (event) { 
     infowindow.close(); 
     var place = autocomplete.getPlace(); 
     if (place.geometry.viewport) { 
      map.fitBounds(place.geometry.viewport); 
     } else { 
      map.setCenter(place.geometry.location); 
      map.setZoom(17); 
     } 

     moveMarker(place.name, place.geometry.location); 
     jQuery('#billing\\:{{textbox name for latitude}}').val(place.geometry.location.lat()); 
     jQuery('#billing\\:{{textbox name for longitude}}').val(place.geometry.location.lng()); 
    }); 
    google.maps.event.addListener(map, 'click', function (event) { 
     jQuery('#billing\\:company').val(event.latLng.lat()); 
     jQuery('#billing\\:fax').val(event.latLng.lng()); 
     infowindow.close(); 
     var geocoder = new google.maps.Geocoder(); 
     geocoder.geocode({ 
      "latLng":event.latLng 
     }, function (results, status) { 
      console.log(results, status); 
      if (status == google.maps.GeocoderStatus.OK) { 
       console.log(results); 
       var lat = results[0].geometry.location.lat(), 
        lng = results[0].geometry.location.lng(), 
        placeName = results[0].address_components[0].long_name, 
        latlng = new google.maps.LatLng(lat, lng); 

       moveMarker(placeName, latlng); 
       jQuery("#billing\\:street2").val(results[0].formatted_address); 
      } 
     }); 
    }); 

    function moveMarker(placeName, latlng) { 
     marker.setIcon(image); 
     marker.setPosition(latlng); 
     infowindow.setContent(placeName); 
     infowindow.open(map, marker); 
    } 
});