ACF MAP - 将标记放在地图的左侧，而不是中心

Question

我有 acf google 地图。我想在地图的左侧有地图标记（图钉），因为在右边我有一些内容，这些内容覆盖了我的图钉。是否可以在 acf 中执行此操作？

我在 wordpress (js) 中的代码：

(function($) {

/*
*  new_map
*
*  This function will render a Google Map onto the selected jQuery element
*
*  @type function
*  @date 8/11/2013
*  @since 4.3.0
*
*  @param $el (jQuery element)
*  @return n/a
*/

function new_map( $el ) {

 // var
 var $markers = $el.find('.marker');


 // vars
 var args = {
  zoom  : 14,
  center  : new google.maps.LatLng(0, 0),
  mapTypeId : google.maps.MapTypeId.ROADMAP,
  scrollwheel: false,
  styles: [{
          "featureType": "water",
          "elementType": "geometry",
          "stylers": [{
            "color": "#e9e9e9"
          }, {
            "lightness": 17
          }]
        }, {
          "featureType": "landscape",
          "elementType": "geometry",
          "stylers": [{
            "color": "#f5f5f5"
          }, {
            "lightness": 20
          }]
        }, {
          "featureType": "road.highway",
          "elementType": "geometry.fill",
          "stylers": [{
            "color": "#ffffff"
          }, {
            "lightness": 17
          }]
        }, {
          "featureType": "road.highway",
          "elementType": "geometry.stroke",
          "stylers": [{
            "color": "#ffffff"
          }, {
            "lightness": 29
          }, {
            "weight": 0.2
          }]
        }, {
          "featureType": "road.arterial",
          "elementType": "geometry",
          "stylers": [{
            "color": "#ffffff"
          }, {
            "lightness": 18
          }]
        }, {
          "featureType": "road.local",
          "elementType": "geometry",
          "stylers": [{
            "color": "#ffffff"
          }, {
            "lightness": 16
          }]
        }, {
          "featureType": "poi",
          "elementType": "geometry",
          "stylers": [{
            "color": "#f5f5f5"
          }, {
            "lightness": 21
          }]
        }, {
          "featureType": "poi.park",
          "elementType": "geometry",
          "stylers": [{
            "color": "#dedede"
          }, {
            "lightness": 21
          }]
        }, {
          "elementType": "labels.text.stroke",
          "stylers": [{
            "visibility": "on"
          }, {
            "color": "#ffffff"
          }, {
            "lightness": 16
          }]
        }, {
          "elementType": "labels.text.fill",
          "stylers": [{
            "saturation": 36
          }, {
            "color": "#333333"
          }, {
            "lightness": 40
          }]
        }, {
          "elementType": "labels.icon",
          "stylers": [{
            "visibility": "off"
          }]
        }, {
          "featureType": "transit",
          "elementType": "geometry",
          "stylers": [{
            "color": "#f2f2f2"
          }, {
            "lightness": 19
          }]
        }, {
          "featureType": "administrative",
          "elementType": "geometry.fill",
          "stylers": [{
            "color": "#fefefe"
          }, {
            "lightness": 20
          }]
        }, {
          "featureType": "administrative",
          "elementType": "geometry.stroke",
          "stylers": [{
            "color": "#fefefe"
          }, {
            "lightness": 17
          }, {
            "weight": 1.2
          }]
        }]
 };


 // create map
 var map = new google.maps.Map( $el[0], args);
    // popup is shown and map is not visible
google.maps.event.trigger(map, 'resize');


 // add a markers reference
 map.markers = [];


 // add markers
 $markers.each(function(){

     add_marker( $(this), map );

 });


 // center map
 center_map( map );


 // return
 return map;

}

/*
*  add_marker
*
*  This function will add a marker to the selected Google Map
*
*  @type function
*  @date 8/11/2013
*  @since 4.3.0
*
*  @param $marker (jQuery element)
*  @param map (Google Map object)
*  @return n/a
*/

function add_marker( $marker, map ) {

 // var
 var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
//console.log($marker.attr('data-lng'));
 var icon = $marker.attr('data-icon');
 // create marker
 var marker = new google.maps.Marker({
  position : latlng,
  map   : map,
  icon  : icon
 });

 // add to array
 map.markers.push( marker );

 // if marker contains HTML, add it to an infoWindow
 if( $marker.html() )
 {
  // create info window
  var infowindow = new google.maps.InfoWindow({
   content  : $marker.html()
  });

  // show info window when marker is clicked
  google.maps.event.addListener(marker, 'click', function() {

   infowindow.open( map, marker );

  });
 }

}

/*
*  center_map
*
*  This function will center the map, showing all markers attached to this map
*
*  @type function
*  @date 8/11/2013
*  @since 4.3.0
*
*  @param map (Google Map object)
*  @return n/a
*/

function center_map( map ) {

 // vars
 var bounds = new google.maps.LatLngBounds();

 // loop through all markers and create bounds
 $.each( map.markers, function( i, marker ){

  var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );

  bounds.extend( latlng );

 });

 // only 1 marker?
 if( map.markers.length == 1 )
 {
  // set center of map
     map.setCenter( bounds.getCenter() );
     map.setZoom( 16 );
 }
 else
 {
  // fit to bounds
  map.fitBounds( bounds );
 }

}

/*
*  document ready
*
*  This function will render each map when the document is ready (page has loaded)
*
*  @type function
*  @date 8/11/2013
*  @since 5.0.0
*
*  @param n/a
*  @return n/a
*/
// global var
var map = null;

$(document).ready(function(){

 $('.acf-map').each(function(){

  // create map
  map = new_map( $(this) );

 });

});

})(jQuery);

我在html中的工作代码：

google.maps.event.addDomListener(window, 'load', init);

    function init() {
      var mapOptions = {
        zoom: 15,
        scrollwheel: false,
        center: new google.maps.LatLng(50.060565, 19.920922 + 0.026),
        styles: [{
          "featureType": "water",
          "elementType": "geometry",
          "stylers": [{
            "color": "#e9e9e9"
          }, {
            "lightness": 17
          }]
        }, {
          "featureType": "landscape",
          "elementType": "geometry",
          "stylers": [{
            "color": "#f5f5f5"
          }, {
            "lightness": 20
          }]
        }, {
          "featureType": "road.highway",
          "elementType": "geometry.fill",
          "stylers": [{
            "color": "#ffffff"
          }, {
            "lightness": 17
          }]
        }, {
          "featureType": "road.highway",
          "elementType": "geometry.stroke",
          "stylers": [{
            "color": "#ffffff"
          }, {
            "lightness": 29
          }, {
            "weight": 0.2
          }]
        }, {
          "featureType": "road.arterial",
          "elementType": "geometry",
          "stylers": [{
            "color": "#ffffff"
          }, {
            "lightness": 18
          }]
        }, {
          "featureType": "road.local",
          "elementType": "geometry",
          "stylers": [{
            "color": "#ffffff"
          }, {
            "lightness": 16
          }]
        }, {
          "featureType": "poi",
          "elementType": "geometry",
          "stylers": [{
            "color": "#f5f5f5"
          }, {
            "lightness": 21
          }]
        }, {
          "featureType": "poi.park",
          "elementType": "geometry",
          "stylers": [{
            "color": "#dedede"
          }, {
            "lightness": 21
          }]
        }, {
          "elementType": "labels.text.stroke",
          "stylers": [{
            "visibility": "on"
          }, {
            "color": "#ffffff"
          }, {
            "lightness": 16
          }]
        }, {
          "elementType": "labels.text.fill",
          "stylers": [{
            "saturation": 36
          }, {
            "color": "#333333"
          }, {
            "lightness": 40
          }]
        }, {
          "elementType": "labels.icon",
          "stylers": [{
            "visibility": "off"
          }]
        }, {
          "featureType": "transit",
          "elementType": "geometry",
          "stylers": [{
            "color": "#f2f2f2"
          }, {
            "lightness": 19
          }]
        }, {
          "featureType": "administrative",
          "elementType": "geometry.fill",
          "stylers": [{
            "color": "#fefefe"
          }, {
            "lightness": 20
          }]
        }, {
          "featureType": "administrative",
          "elementType": "geometry.stroke",
          "stylers": [{
            "color": "#fefefe"
          }, {
            "lightness": 17
          }, {
            "weight": 1.2
          }]
        }]
      };
      var mapElement = document.getElementById('map');
      var map = new google.maps.Map(mapElement, mapOptions);
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(50.060565, 19.920922),
        map: map,
        title: 'Dom ubezpieczeń'
      });
    }

我想，某事与 +/- 0.026 或其他值有关。放在哪里？提前感谢您的帮助:)

Answer 1

可行的解决方案是修改center_map()函数：

function center_map( map ) {

 // vars
 var bounds = new google.maps.LatLngBounds();

 // loop through all markers and create bounds
 $.each( map.markers, function( i, marker ){

  var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );

  bounds.extend( latlng );

 });

 // only 1 marker?
 if( map.markers.length == 1 )
 {
        
        // get the current center
        theCenter = bounds.getCenter();
        
        // set center of map
     map.setCenter( {lat: theCenter.lat(), lng: theCenter.lng() + 0.026} );
     map.setZoom( 16 );
 }
 else
 {
  // fit to bounds
  map.fitBounds( bounds );
 }

}

ACF MAP - 将标记放在地图的左侧，而不是中心

ACF MAP - Put a marker to the left side of the map, not center

javascript

wordpress

google-maps

dictionary

advanced-custom-fields