blocks|key|567929|text|下面是一个使用maps的panBy()方法解决这个问题的示例：http://jsfiddle.net/upsidown/2wej9smf/|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|567930|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/upsidown/2wej9smf/^0|C|7|V|12|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

<p>Here's an example of solving the problem using <code>panBy()</code> method of the maps API: <a href="http://jsfiddle.net/upsidown/2wej9smf/" rel="noreferrer">http://jsfiddle.net/upsidown/2wej9smf/</a></p>


blocks|key|352062|text|这里有一个更简单的方法，它在响应式设计中可能更有用，因为您可以使用百分比而不是像素。没有世界坐标，就没有指向点的LatLngs！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|352063|var+center;++//+a+latLng
var+offsetX+=+0.25;+//+move+center+one+quarter+map+width+left
var+offsetY+=+0.25;+//+move+center+one+quarter+map+height+down

var+span+=+map.getBounds().toSpan();+//+a+latLng+-+#+of+deg+map+spans

var+newCenter+=+{+
++++lat:+center.lat()+%2B+span.lat()*offsetY,
++++lng:+center.lng()+%2B+span.lng()*offsetX
};

map.panTo(newCenter);++//+or+map.setCenter(newCenter);|code-block|syntax|javascript|352064|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Here's a simpler method that might be more useful in responsive design since you can use percentages instead of pixels. No world coordinates, no LatLngs to Points! </p>

<pre><code>var center;  // a latLng
var offsetX = 0.25; // move center one quarter map width left
var offsetY = 0.25; // move center one quarter map height down

var span = map.getBounds().toSpan(); // a latLng - # of deg map spans

var newCenter = { 
    lat: center.lat() + span.lat()*offsetY,
    lng: center.lng() + span.lng()*offsetX
};

map.panTo(newCenter);  // or map.setCenter(newCenter);
</code></pre>


blocks|key|568128|text|刚刚找到了另一个最简单的解决方案。如果您使用的是fitBounds方法，您可以将可选的第二个参数传递给它。此参数是填充，将在拟合边界时考虑。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|568129|//+pass+single+side:
map.fitBounds(bounds,+{+left:+1000+})

//+OR+use+Number:
map.fitBounds(bounds,+20)|code-block|syntax|javascript|568130|进一步阅读：official+docs。|offset|length|568131|entityMap|0|LINK|mutability|MUTABLE|url|https://developers.google.com/maps/documentation/javascript/reference/3/map#Map.fitBounds^0|0|0|6|D|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Just found another simplest solution.
In case you're using fitBounds method, you can pass optional second argument to its. This argument is padding, that will be considered while fitting bounds.</p>

<pre><code>// pass single side:
map.fitBounds(bounds, { left: 1000 })

// OR use Number:
map.fitBounds(bounds, 20)
</code></pre>

<p>Further reading: <a href="https://developers.google.com/maps/documentation/javascript/reference/3/map#Map.fitBounds" rel="noreferrer">official docs</a>.</p>


blocks|key|568052|text|经过广泛的搜索后，我找不到一种方法来做到这一点，也包括缩放。谢天谢地，一个clever+chap已经解决了这个问题。还有一个fiddle+here|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|568053|​|568054|'use+strict';

const+TILE_SIZE+=+{
++height:+256,
++width:+256
};+//+google+World+tile+size,+as+of+v3.22
const+ZOOM_MAX+=+21;+//+max+google+maps+zoom+level,+as+of+v3.22
const+BUFFER+=+15;+//+edge+buffer+for+fitting+markers+within+viewport+bounds

const+mapOptions+=+{
++zoom:+14,
++center:+{
++++lat:+34.075328,
++++lng:+-118.330432
++},
++options:+{
++++mapTypeControl:+false
++}
};
const+markers+=+[];
const+mapDimensions+=+{};
const+mapOffset+=+{
++x:+0,
++y:+0
};
const+mapEl+=+document.getElementById('gmap');
const+overlayEl+=+document.getElementById('overlay');
const+gmap+=+new+google.maps.Map(mapEl,+mapOptions);

const+updateMapDimensions+=+()+=>+{
++mapDimensions.height+=+mapEl.offsetHeight;
++mapDimensions.width+=+mapEl.offsetWidth;
};

const+getBoundsZoomLevel+=+(bounds,+dimensions)+=>+{
++const+latRadian+=+lat+=>+{
++++let+sin+=+Math.sin(lat+*+Math.PI+/+180);
++++let+radX2+=+Math.log((1+%2B+sin)+/+(1+-+sin))+/+2;
++++return+Math.max(Math.min(radX2,+Math.PI),+-Math.PI)+/+2;
++};
++const+zoom+=+(mapPx,+worldPx,+fraction)+=>+{
++++return+Math.floor(Math.log(mapPx+/+worldPx+/+fraction)+/+Math.LN2);
++};
++const+ne+=+bounds.getNorthEast();
++const+sw+=+bounds.getSouthWest();
++const+latFraction+=+(latRadian(ne.lat())+-+latRadian(sw.lat()))+/+Math.PI;
++const+lngDiff+=+ne.lng()+-+sw.lng();
++const+lngFraction+=+((lngDiff+<+0)+?+(lngDiff+%2B+360)+:+lngDiff)+/+360;
++const+latZoom+=+zoom(dimensions.height,+TILE_SIZE.height,+latFraction);
++const+lngZoom+=+zoom(dimensions.width,+TILE_SIZE.width,+lngFraction);
++return+Math.min(latZoom,+lngZoom,+ZOOM_MAX);
};

const+getBounds+=+locations+=>+{
++let+northeastLat;
++let+northeastLong;
++let+southwestLat;
++let+southwestLong;
++locations.forEach(function(location)+{
++++if+(!northeastLat)+{
++++++northeastLat+=+southwestLat+=+location.lat;
++++++southwestLong+=+northeastLong+=+location.lng;
++++++return;
++++}
++++if+(location.lat+>+northeastLat)+northeastLat+=+location.lat;
++++else+if+(location.lat+<+southwestLat)+southwestLat+=+location.lat;
++++if+(location.lng+<+northeastLong)+northeastLong+=+location.lng;
++++else+if+(location.lng+>+southwestLong)+southwestLong+=+location.lng;
++});
++const+northeast+=+new+google.maps.LatLng(northeastLat,+northeastLong);
++const+southwest+=+new+google.maps.LatLng(southwestLat,+southwestLong);
++const+bounds+=+new+google.maps.LatLngBounds();
++bounds.extend(northeast);
++bounds.extend(southwest);
++return+bounds;
};

const+zoomWithOffset+=+shouldZoom+=>+{
++const+currentzoom+=+gmap.getZoom();
++const+newzoom+=+shouldZoom+?+currentzoom+%2B+1+:+currentzoom+-+1;
++const+offset+=+{
++++x:+shouldZoom+?+-mapOffset.x+/+4+:+mapOffset.x+/+2,
++++y:+shouldZoom+?+-mapOffset.y+/+4+:+mapOffset.y+/+2
++};
++const+newCenter+=+offsetLatLng(gmap.getCenter(),+offset.x,+offset.y);
++if+(shouldZoom)+{
++++gmap.setZoom(newzoom);
++++gmap.panTo(newCenter);
++}+else+{
++++gmap.setCenter(newCenter);
++++gmap.setZoom(newzoom);
++}
};

const+setMapBounds+=+locations+=>+{
++updateMapDimensions();
++const+bounds+=+getBounds(locations);
++const+dimensions+=+{
++++width:+mapDimensions.width+-+mapOffset.x+-+BUFFER+*+2,
++++height:+mapDimensions.height+-+mapOffset.y+-+BUFFER+*+2
++};
++const+zoomLevel+=+getBoundsZoomLevel(bounds,+dimensions);
++gmap.setZoom(zoomLevel);
++setOffsetCenter(bounds.getCenter());
};

const+offsetLatLng+=+(latlng,+offsetX,+offsetY)+=>+{
++offsetX+=+offsetX+%7C%7C+0;
++offsetY+=+offsetY+%7C%7C+0;
++const+scale+=+Math.pow(2,+gmap.getZoom());
++const+point+=+gmap.getProjection().fromLatLngToPoint(latlng);
++const+pixelOffset+=+new+google.maps.Point((offsetX+/+scale),+(offsetY+/+scale));
++const+newPoint+=+new+google.maps.Point(
++++point.x+-+pixelOffset.x,
++++point.y+%2B+pixelOffset.y
++);
++return+gmap.getProjection().fromPointToLatLng(newPoint);
};

const+setOffsetCenter+=+latlng+=>+{
++const+newCenterLatLng+=+offsetLatLng(latlng,+mapOffset.x+/+2,+mapOffset.y+/+2);
++gmap.panTo(newCenterLatLng);
};

const+locations+=+[{
++name:+'Wilshire+Country+Club',
++lat:+34.077796,
++lng:+-118.331151
},+{
++name:+'301+N+Rossmore+Ave',
++lat:+34.077146,
++lng:+-118.327805
},+{
++name:+'5920+Beverly+Blvd',
++lat:+34.070281,
++lng:+-118.331831
}];

locations.forEach(function(location)+{
++let+marker+=+new+google.maps.Marker({
++++position:+new+google.maps.LatLng(location.lat,+location.lng),
++++title:+location.name
++})
++marker.setMap(gmap);
++markers.push(marker);
});

mapOffset.x+=+overlayEl.offsetWidth;

document.zoom+=+bool+=>+zoomWithOffset(bool);
document.setBounds+=+()+=>+setMapBounds(locations);|code-block|syntax|javascript|568055|section+{
++height:+180px;
++margin-bottom:+15px;
++font-family:+sans-serif;
++color:+grey;
}
figure+{
++position:+relative;
++margin:+0;
++width:+100%25;
++height:+100%25;
}
figcaption+{
++position:+absolute;
++left:+15px;
++top:+15px;
++width:+120px;
++padding:+15px;
++background:+white;
++box-shadow:+0+2px+5px+rgba(0,+0,+0,+.3);
}
gmap+{
++display:+block;
++height:+100%25;
}|568056|<script+type="text/javascript"+src="https://maps.googleapis.com/maps/api/js"></script>

<section>
++<figure>
++++<gmap+id="gmap"></gmap>
++++<figcaption+id="overlay">
++++++<h4>Tile+Overlay</h4>
++++++<p>To+be+avoided+by+the+map!</p>
++++</figcaption>
++</figure>
</section>
<button+onclick="zoom(true)">zoom+in</button>
<button+onclick="zoom(false)">zoom+out</button>
<button+onclick="setBounds()">set+bounds</button>|568057|568058|entityMap|0|LINK|mutability|MUTABLE|url|https://www.reonomy.com/offsetting-bounds-and-zoom-on-a-google-map/|1|https://jsfiddle.net/vh3s88mc/15/^0|11|B|0|1Q|B|1|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]|$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|17|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|18|8|@]|9|@]|C|$I|J]]|$1|M|3|N|5|H|7|19|8|@]|9|@]|C|$I|J]]|$1|O|3|E|5|6|7|1A|8|@]|9|@]|C|$]]|$1|P|3|-4|5|6|7|1B|8|@]|9|@]|C|$]]]|Q|$R|$5|S|T|U|C|$V|W]]|X|$5|S|T|U|C|$V|Y]]]]

<p>After extensive searching I could not find a way to do this that also included zoom. Thankfully a <a href="https://www.reonomy.com/offsetting-bounds-and-zoom-on-a-google-map/" rel="nofollow">clever chap</a> has figured it out.  There is also a <a href="https://jsfiddle.net/vh3s88mc/15/" rel="nofollow">fiddle here</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>'use strict';

const TILE_SIZE = {
  height: 256,
  width: 256
}; // google World tile size, as of v3.22
const ZOOM_MAX = 21; // max google maps zoom level, as of v3.22
const BUFFER = 15; // edge buffer for fitting markers within viewport bounds

const mapOptions = {
  zoom: 14,
  center: {
    lat: 34.075328,
    lng: -118.330432
  },
  options: {
    mapTypeControl: false
  }
};
const markers = [];
const mapDimensions = {};
const mapOffset = {
  x: 0,
  y: 0
};
const mapEl = document.getElementById('gmap');
const overlayEl = document.getElementById('overlay');
const gmap = new google.maps.Map(mapEl, mapOptions);

const updateMapDimensions = () =&gt; {
  mapDimensions.height = mapEl.offsetHeight;
  mapDimensions.width = mapEl.offsetWidth;
};

const getBoundsZoomLevel = (bounds, dimensions) =&gt; {
  const latRadian = lat =&gt; {
    let sin = Math.sin(lat * Math.PI / 180);
    let radX2 = Math.log((1 + sin) / (1 - sin)) / 2;
    return Math.max(Math.min(radX2, Math.PI), -Math.PI) / 2;
  };
  const zoom = (mapPx, worldPx, fraction) =&gt; {
    return Math.floor(Math.log(mapPx / worldPx / fraction) / Math.LN2);
  };
  const ne = bounds.getNorthEast();
  const sw = bounds.getSouthWest();
  const latFraction = (latRadian(ne.lat()) - latRadian(sw.lat())) / Math.PI;
  const lngDiff = ne.lng() - sw.lng();
  const lngFraction = ((lngDiff &lt; 0) ? (lngDiff + 360) : lngDiff) / 360;
  const latZoom = zoom(dimensions.height, TILE_SIZE.height, latFraction);
  const lngZoom = zoom(dimensions.width, TILE_SIZE.width, lngFraction);
  return Math.min(latZoom, lngZoom, ZOOM_MAX);
};

const getBounds = locations =&gt; {
  let northeastLat;
  let northeastLong;
  let southwestLat;
  let southwestLong;
  locations.forEach(function(location) {
    if (!northeastLat) {
      northeastLat = southwestLat = location.lat;
      southwestLong = northeastLong = location.lng;
      return;
    }
    if (location.lat &gt; northeastLat) northeastLat = location.lat;
    else if (location.lat &lt; southwestLat) southwestLat = location.lat;
    if (location.lng &lt; northeastLong) northeastLong = location.lng;
    else if (location.lng &gt; southwestLong) southwestLong = location.lng;
  });
  const northeast = new google.maps.LatLng(northeastLat, northeastLong);
  const southwest = new google.maps.LatLng(southwestLat, southwestLong);
  const bounds = new google.maps.LatLngBounds();
  bounds.extend(northeast);
  bounds.extend(southwest);
  return bounds;
};

const zoomWithOffset = shouldZoom =&gt; {
  const currentzoom = gmap.getZoom();
  const newzoom = shouldZoom ? currentzoom + 1 : currentzoom - 1;
  const offset = {
    x: shouldZoom ? -mapOffset.x / 4 : mapOffset.x / 2,
    y: shouldZoom ? -mapOffset.y / 4 : mapOffset.y / 2
  };
  const newCenter = offsetLatLng(gmap.getCenter(), offset.x, offset.y);
  if (shouldZoom) {
    gmap.setZoom(newzoom);
    gmap.panTo(newCenter);
  } else {
    gmap.setCenter(newCenter);
    gmap.setZoom(newzoom);
  }
};

const setMapBounds = locations =&gt; {
  updateMapDimensions();
  const bounds = getBounds(locations);
  const dimensions = {
    width: mapDimensions.width - mapOffset.x - BUFFER * 2,
    height: mapDimensions.height - mapOffset.y - BUFFER * 2
  };
  const zoomLevel = getBoundsZoomLevel(bounds, dimensions);
  gmap.setZoom(zoomLevel);
  setOffsetCenter(bounds.getCenter());
};

const offsetLatLng = (latlng, offsetX, offsetY) =&gt; {
  offsetX = offsetX || 0;
  offsetY = offsetY || 0;
  const scale = Math.pow(2, gmap.getZoom());
  const point = gmap.getProjection().fromLatLngToPoint(latlng);
  const pixelOffset = new google.maps.Point((offsetX / scale), (offsetY / scale));
  const newPoint = new google.maps.Point(
    point.x - pixelOffset.x,
    point.y + pixelOffset.y
  );
  return gmap.getProjection().fromPointToLatLng(newPoint);
};

const setOffsetCenter = latlng =&gt; {
  const newCenterLatLng = offsetLatLng(latlng, mapOffset.x / 2, mapOffset.y / 2);
  gmap.panTo(newCenterLatLng);
};

const locations = [{
  name: 'Wilshire Country Club',
  lat: 34.077796,
  lng: -118.331151
}, {
  name: '301 N Rossmore Ave',
  lat: 34.077146,
  lng: -118.327805
}, {
  name: '5920 Beverly Blvd',
  lat: 34.070281,
  lng: -118.331831
}];

locations.forEach(function(location) {
  let marker = new google.maps.Marker({
    position: new google.maps.LatLng(location.lat, location.lng),
    title: location.name
  })
  marker.setMap(gmap);
  markers.push(marker);
});

mapOffset.x = overlayEl.offsetWidth;

document.zoom = bool =&gt; zoomWithOffset(bool);
document.setBounds = () =&gt; setMapBounds(locations);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>section {
  height: 180px;
  margin-bottom: 15px;
  font-family: sans-serif;
  color: grey;
}
figure {
  position: relative;
  margin: 0;
  width: 100%;
  height: 100%;
}
figcaption {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 120px;
  padding: 15px;
  background: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
}
gmap {
  display: block;
  height: 100%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"&gt;&lt;/script&gt;

&lt;section&gt;
  &lt;figure&gt;
    &lt;gmap id="gmap"&gt;&lt;/gmap&gt;
    &lt;figcaption id="overlay"&gt;
      &lt;h4&gt;Tile Overlay&lt;/h4&gt;
      &lt;p&gt;To be avoided by the map!&lt;/p&gt;
    &lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/section&gt;
&lt;button onclick="zoom(true)"&gt;zoom in&lt;/button&gt;
&lt;button onclick="zoom(false)"&gt;zoom out&lt;/button&gt;
&lt;button onclick="setBounds()"&gt;set bounds&lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|567888|text|当涉及到偏移一条路径或一组标记时，可以在此处找到另一种方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|567889|https://stackoverflow.com/a/26192440/1238965|offset|length|567890|它仍然使用@Andrew+Leach+answer中描述的fromLatLngToPoint()方法。|style|CODE|567891|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|18|0|0|T|J|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@$D|S|E|T|1|U]]|A|$]]|$1|F|3|G|5|6|7|V|8|@$D|W|E|X|H|I]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|C]]]]

<p>Another approach when it comes to offsetting a route or a group of markers can be found here:</p>

<p><a href="https://stackoverflow.com/a/26192440/1238965">https://stackoverflow.com/a/26192440/1238965</a></p>

<p>It still uses the <code>fromLatLngToPoint()</code> method described in @Andrew Leach answer.</p>


<p>I have a Google map with a semi transparent panel covering a portion of the area. I would like to adjust the center point of the map to take into account the portion of the map that is partially obscured. See the image below. Ideally, where the crosshairs and pin are placed would be the center point of the map.</p>

<p>I hope that makes sense.</p>

<p>The reason is simple: When you zoom it needs to center the map over the crosshair rather than at 50% 50%. Also, I will be plotting markers on the map and moving through them in sequence. When the map centers on them, they also need to be at the offset position.</p>

<p>Thanks in advance!</p>

<p><img src="https://i.stack.imgur.com/eZeAk.jpg" alt="Mockup of the map I am building"></p>


How to offset the center point in Google maps api V3

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

我有一个谷歌地图与半透明面板覆盖的一部分地区。我想调整地图的中心点，以考虑部分模糊的地图部分。请参见下图。理想情况下，放置十字光标和大头针的位置应该是地图的中心点。我希望这是有意义的。原因很简单:当您缩放地图时，需要将地图居中放置在十字准线上，而不是在50% 50%。此外，我将在地图上绘制标记，并按顺序移动它们。当贴图以它们为中心时，它们也需要位于偏移位置。提前感谢！​​

问如何在Google map api V3中偏移中心点
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Google map api V3中偏移中心点EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Google map api V3中偏移中心点
EN