标记在Google Map API v3上偏移

问题描述

我用自定义的PNG标记创建了一个简单的地图。是否可以抵消附加的PNG图像？在Google Map API v3文档中似乎没有提及任何'偏移'。

解决方案

截至v3。 10中， MarkerImage 类已被弃用，应该使用 Icon 匿名对象。从

例如：

  var marker = new google.maps.Marker（{
 map：map，
 position：map.getCenter（），
图标：{
 url：place.icon，
 size：new google.maps.Size（71，71），
 origin：new google.maps.Point（0，0），
 anchor：new google.maps.Point（17，34 ），
 scaledSize：new google.maps.Size（25，25）
} 
}）; 
  

代码段
$ b

  function initialize（）{var mapCanvas = document.getElementById（'map'）; var mapOptions = {center：new google.maps.LatLng（44.5403，-78.5463），zoom：8，mapTypeId：google.maps.MapTypeId .ROADMAP} var map = new google.maps.Map（mapCanvas，mapOptions）var marker = new google.maps.Marker（{map：map，position：map.getCenter（），icon：{url：http：// i.stack.imgur.com/PYAIJ.png，size：new google.maps.Size（36，36），origin：new google.maps.Point（0，0），anchor：new google.maps.Point（ 18，18），scaledSize：new google.maps.Size（25,25）}}）;} google.maps.event.addDomListener（window，'load'，initialize）;  

  html，body，＃map {width：100％; height：100％;}  

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

I've created a simple map with custom PNG markers. Is it possible to offset the attached PNG image? There does not seem to be any mention of an 'offset' in the Google Map API v3 documentation.

解决方案

As of v3.10, the MarkerImage class has been deprecated, the Icon anonymous object should be used instead. From the documentation

For example:

var marker = new google.maps.Marker({
  map:map,
  position: map.getCenter(),
  icon: {
    url: place.icon,
    size: new google.maps.Size(71, 71),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(17, 34),
    scaledSize: new google.maps.Size(25, 25)
  }
});

example fiddle

code snippet"

function initialize() {
  var mapCanvas = document.getElementById('map');
  var mapOptions = {
    center: new google.maps.LatLng(44.5403, -78.5463),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(mapCanvas, mapOptions)
  var marker = new google.maps.Marker({
    map: map,
    position: map.getCenter(),
    icon: {
      url: "http://i.stack.imgur.com/PYAIJ.png",
      size: new google.maps.Size(36, 36),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(18, 18),
      scaledSize: new google.maps.Size(25, 25)
    }
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map {
  width: 100%;
  height: 100%;
}

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

这篇关于标记在Google Map API v3上偏移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！