谷歌地图标记偏移

时间:2016-10-03 11:38:31

标签: javascript google-maps google-maps-api-3

我正在使用谷歌地图版本3.我想显示一个方形标记。目前谷歌显示它像下图。即该点位于标记的底部。我的标记是假设20px X 20px。目前谷歌在红点显示它。

enter image description here

现在我需要稍微显示标记。即点不应该在底部而是在中间。如下图所示。

enter image description here

我试过,锚点,anchorPosition,anchorPoint,仍然没有运气。

有人能指出我这样做的确切方法吗?

修改的 以下是我的代码,

icon = {
               url: "/app/image/map_pin/marker-90.png",
               size: new google.maps.Size(32, 33),
               origin: new google.maps.Point(0, 0),
               anchor: new google.maps.Point(50,50)

           }


this.makeMarker(this.map,LatLong, icon);


makeMarker(map: any, lat: number, lng: number, icon: string) {
       new google.maps.Marker({
           map: map,
           icon: icon,
           animation: google.maps.Animation.DROP,
           position: { lat: lat, lng: lng }
       });
   }

我尝试了位于印度古吉拉艾哈迈达巴德的lat: 23.038645, lng: 72.511895。但缩小后显示在阿富汗。

1 个答案:

答案 0 :(得分:2)

the documentation,这有效:

datagrid



var icon = {
  url: "http://i.stack.imgur.com/FhryS.png", // 20px x 20px icon
  // size: new google.maps.Size(20, 20),    // size of icon is 20px x 20px (so this isn't required)
  // origin: new google.maps.Point(0, 0),   // this is the default and isn't needed
  anchor: new google.maps.Point(10, 10)  // anchor is in the center at 10px x 10px
}

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var icon = {
    url: "http://i.stack.imgur.com/FhryS.png",
    anchor: new google.maps.Point(10, 10)
  };
  makeMarker(map, map.getCenter().lat(), map.getCenter().lng(), icon);
}
google.maps.event.addDomListener(window, "load", initialize);

function makeMarker(map, lat, lng, icon) {
  new google.maps.Marker({
    map: map,
    icon: icon,
    animation: google.maps.Animation.DROP,
    position: {
      lat: lat,
      lng: lng
    }
  });
}

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




enter image description here