如何偏移谷歌地图标记

设置地图中心后（在地理编码器回调函数中）调用offsetCenter函数。

概念验证小提琴

代码片段：

var map;
function initialize() {
  var latlng = new google.maps.LatLng(0, 0);
  var myOptions = {
    zoom: 16,
    center: latlng,
    scrollwheel: false,
    disableDefaultUI: true,
    draggable: false,
    keyboardShortcuts: false,
    disableDoubleClickZoom: false,
    noClear: true,
    scaleControl: false,
    panControl: false,
    streetViewControl: false,
    styles: [{
      "featureType": "landscape",
      "stylers": [{
        "hue": "#FFBB00"
      }, {
        "saturation": 43.400000000000006
      }, {
        "lightness": 37.599999999999994
      }, {
        "gamma": 1
      }]
    }, {
      "featureType": "road.highway",
      "stylers": [{
        "hue": "#FFC200"
      }, {
        "saturation": -61.8
      }, {
        "lightness": 45.599999999999994
      }, {
        "gamma": 1
      }]
    }, {
      "featureType": "road.arterial",
      "stylers": [{
        "hue": "#FF0300"
      }, {
        "saturation": -100
      }, {
        "lightness": 51.19999999999999
      }, {
        "gamma": 1
      }]
    }, {
      "featureType": "road.local",
      "stylers": [{
        "hue": "#FF0300"
      }, {
        "saturation": -100
      }, {
        "lightness": 52
      }, {
        "gamma": 1
      }]
    }, {
      "featureType": "water",
      "stylers": [{
        "hue": "#0078FF"
      }, {
        "saturation": -13.200000000000003
      }, {
        "lightness": 2.4000000000000057
      }, {
        "gamma": 1
      }]
    }, {
      "featureType": "poi",
      "stylers": [{
        "hue": "#00FF6A"
      }, {
        "saturation": -1.0989010989011234
      }, {
        "lightness": 11.200000000000017
      }, {
        "gamma": 1
      }]
    }],
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map"), myOptions);
  var geocoder_map = new google.maps.Geocoder();
  var address = '11681 King Fahd Road, Al Mohammadiyah, 4047, Riyadh, Riyadh Province Saudi Arabia';
  geocoder_map.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var image = "http://maps.google.com/mapfiles/ms/micons/blue.png";
      var marker = new google.maps.Marker({
        map: map,
        icon: image,
        position: map.getCenter()
      });
      var contentString = 'Tagline';
      var infowindow = new google.maps.InfoWindow({
        content: contentString
      });
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
      });
      // move center 200 pixels to the right.
      offsetCenter(map.getCenter(), 200, 0)
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map);
  centerControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.LEFT_CENTER].push(centerControlDiv);
}
google.maps.event.addDomListener(window, "load", initialize);
function offsetCenter(latlng, offsetx, offsety) {
    // latlng is the apparent centre-point
    // offsetx is the distance you want that point to move to the right, in pixels
    // offsety is the distance you want that point to move upwards, in pixels
    // offset can be negative
    // offsetx and offsety are both optional
    var scale = Math.pow(2, map.getZoom());
    var worldCoordinateCenter = map.getProjection().fromLatLngToPoint(latlng);
    var pixelOffset = new google.maps.Point((offsetx / scale) || 0, (offsety / scale) || 0)
    var worldCoordinateNewCenter = new google.maps.Point(
      worldCoordinateCenter.x - pixelOffset.x,
      worldCoordinateCenter.y + pixelOffset.y
    );
    var newCenter = map.getProjection().fromPointToLatLng(worldCoordinateNewCenter);
    map.setCenter(newCenter);
  }
  /**
   * The CenterControl adds a control to the map that recenters the map on
   * Chicago.
   * This constructor takes the control DIV as an argument.
   * @constructor
   */
function CenterControl(controlDiv, map) {
  // Set CSS for the control border.
  var controlUI = document.createElement('div');
  controlUI.setAttribute("style", "display:block;width:400px;background-color:white;height:100px; border: 1px black solid;");
  controlUI.style.width = '400px';
  controlUI.title = 'Click to recenter the map';
  controlDiv.appendChild(controlUI);
  // Set CSS for the control interior.
  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(25,25,25)';
  controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlText.style.fontSize = '16px';
  controlText.style.lineHeight = '38px';
  controlText.style.paddingLeft = '5px';
  controlText.style.paddingRight = '5px';
  controlText.innerHTML = 'Test Text';
  controlUI.appendChild(controlText);
  // Setup the click event listeners: simply set the map to Chicago.
  controlUI.addEventListener('click', function() {
    map.setCenter(chicago);
  });
}

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>