标记在Google Map API v3上偏移 [英] Marker off-set on Google Map API v3

问题描述

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

解决方案

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

直到Google Maps JavaScript API的3.10版本，复杂图标被定义为MarkerImage对象。 Icon对象文字已在版本3.10中添加，并从版本3.11开始将MarkerImage替换。

例如：

  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）
} 
}）; 
  

example fiddle

代码段
$ 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

Until version 3.10 of the Google Maps JavaScript API, complex icons were defined as MarkerImage objects. The Icon object literal was added in version 3.10, and replaces MarkerImage from version 3.11 onwards.

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上偏移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！