2016-10-03 123 views
2

我正在使用谷歌地图版本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这是在艾哈迈达巴德,Gujara,印度。但缩小后显示在阿富汗的点。

+1

它的尺寸,产地,锚的组合。你见过这个吗? https://developers.google.com/maps/documentation/javascript/examples/icon-complex –

+0

我已经使用过,请参阅我编辑的问题 – Akshay

+0

您可以在您的问题中发布图标(或图标本身)的有效网址? – geocodezip

回答

2

the documentation,这个工程:

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 
 
}
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>

enter image description here