结帐 Magento 上的 Google 地图

问题描述 投票：0回答：3

我想在 magento 的一页结帐页面添加谷歌地图，在送货地址表格上，magento 还可以捕获客户的纬度和经度

我使用的是magento 1.9.2

google-maps magento checkout
3个回答
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);
    }
});

0
投票
  1. 使用 Google 地图 API 要集成 Google 地图，您需要使用 Google 地图 JavaScript API 来呈现地图并启用地理定位和地址自动完成等功能。这是一个基本轮廓：

获取 API 密钥：

转到 Google Cloud Console 并启用 Maps JavaScript API 和 Places API。 生成 API 密钥并将其限制在您的域中以确保安全。 将地图添加到结帐页面：

通过扩展 checkout_index_index 布局自定义 Magento 2 结账页面。 将 Google Maps JavaScript API 脚本包含在您的自定义模块中。 启用地址自动完成：

使用 Places API 的自动完成服务在用户键入时建议地址。 保存选择的地址：

从地图上捕获地址详细信息，并使用 Magento 的自定义字段将其保存到订单中。

  1. 考虑预构建的解决方案 虽然从头开始实现这一点是可能的，但它可能非常耗时，并且需要深入了解 Magento 2 和 Google Maps API。

如果您正在寻找更高效且随时可用的选项，Magento 2 的 Google 地图 Pin 送货地址结帐扩展程序可能会有所帮助。这个扩展： https://shop.aalogics.com/google-maps-pin-shipping-address-checkout-extension-magento2 结账时提供直观的地图界面。 允许用户通过在地图上放置图钉来选择他们的确切位置。 根据所选位置自动填写地址字段。 支持多个送货地址。 这可以显着改善客户的用户体验并节省开发时间。

通过自行定制 Magento 或利用预构建的解决方案，您可以使用 Google 地图增强结账流程。如果您在执行上述步骤时需要帮助，请告诉我！

-1
投票

您可以集成Google Maps Geocoding API来获取客户的经度和纬度。

地理编码是将地址（如“1600 Amphitheatre Parkway, Mountain View, CA”）转换为地理坐标（如纬度 37.423021 和经度 -122.083739）的过程，您可以使用它在地图上放置标记，或定位地图。

样品请求：

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

响应示例：

<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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.