Google地圖：自定義標記圖標-不在矩形中心繪圖

Question

嘗試繪制邊界為lat / lng的矩形區域，並在該區域的中心繪制一個標記，當我使用末端逐漸變細的google maps的默認圖標時，在放大/縮小時它會粘貼到矩形上。 但是使用自定義圖標時，它不會粘貼到矩形區域。 請檢查小提琴：

默認標記： https ： //jsfiddle.net/8mQ6G/473/

    var myPos = new google.maps.LatLng(47.56715, -122.1556);
    var marker = new google.maps.Marker({
        position: myPos,
        //icon: "https://maps.google.com/mapfiles/kml/shapes/info-i_maps.png",
        map: map
      });

 var rectangle = new google.maps.Rectangle({
   strokeColor: '#FF0000',
   strokeOpacity: 0.8,
   strokeWeight: 2,
   fillColor: '#ffffff',
   fillOpacity: 0.35,
   map: map,
   bounds: new google.maps.LatLngBounds(
   new google.maps.LatLng(47.5204, -122.2047),
   new google.maps.LatLng(47.6139, -122.1065))
 });

自定義標記： https ： //jsfiddle.net/8mQ6G/472/

    var myPos = new google.maps.LatLng(47.56715, -122.1556);
    var marker = new google.maps.Marker({
        position: myPos,
        icon: "https://maps.google.com/mapfiles/kml/shapes/info-i_maps.png",
        map: map
      });

 var rectangle = new google.maps.Rectangle({
   strokeColor: '#FF0000',
   strokeOpacity: 0.8,
   strokeWeight: 2,
   fillColor: '#ffffff',
   fillOpacity: 0.35,
   map: map,
   bounds: new google.maps.LatLngBounds(
   new google.maps.LatLng(47.5204, -122.2047),
   new google.maps.LatLng(47.6139, -122.1065))
 });

使自定義圖標在其他位置顯示的原因取決於圖標的底部（向左還是向右），因為如果它不像默認圖標那樣居中，它將始終偏離精確的經度/緯度。 請建議對此問題有任何解決方案。

Answer 1

請參閱文檔中有關復雜自定義標記的討論。

復雜的圖標

您可能需要指定復雜的形狀以指示可單擊的區域，並指定圖標相對於其他疊加層的顯示方式（它們的“堆疊順序”）。 以這種方式指定的圖標應將其圖標屬性設置為Icon類型的對象。

圖標對象定義圖像。 它們還定義了圖標的大小，圖標的原點（例如，如果所需圖像是子畫面中較大圖像的一部分）以及圖標熱點應位於的錨點（基於來源 ）。

您可以將錨點設置到圖標上您希望放置在該位置的任何位置（通常是“氣泡”圖標的尖端，但是對於“ i”，我想您會希望將“ i”的底部從圖片底部到中心約4個像素：

 var marker = new google.maps.Marker({
   position: myPos,
   icon: {
     url: "https://maps.google.com/mapfiles/kml/shapes/info-i_maps.png",
     anchor: new google.maps.Point(16, 28)
   },
   map: map
 });

概念證明

代碼段：

 function initialize() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 7, center: new google.maps.LatLng(47.53772, -122.1153), mapTypeId: google.maps.MapTypeId.ROADMAP }); var myPos = new google.maps.LatLng(47.56715, -122.1556); var marker = new google.maps.Marker({ position: myPos, icon: { url: "https://maps.google.com/mapfiles/kml/shapes/info-i_maps.png", // referenced to the upper left hand corner of the image, in pixels // the image is 32 x 32, this is in the center 4 pixels from the bottom anchor: new google.maps.Point(16, 28) }, map: map }); var rectangle = new google.maps.Rectangle({ strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#ffffff', fillOpacity: 0.35, map: map, bounds: new google.maps.LatLngBounds( new google.maps.LatLng(47.5204, -122.2047), new google.maps.LatLng(47.6139, -122.1065)) }); } initialize(); 

 html, body, #map { height: 100%; width: 100%; border: 6px solid #dedede; margin: 0 auto; } 

 <title>Google Maps JavaScript API v3 Example: Rectangle Simple</title> <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map"></div>