如何在谷歌地圖上使用svg圖示作為標記-有解無憂

我在 React 中為標記圖示設定了這個物件：

const icon = {
      path: "M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c- 
      1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z",
      fillColor: "red",
      fillOpacity: 1,
      scale: 2,
      strokeColor: "red",
      strokeWeight: 1,
};

在此處輸入影像描述

標記僅在我放大時才指向確切位置。我嘗試在圖示物件中添加它：anchor: new google.maps.Point(15, 42),，但是當我重繪頁面時它回傳錯誤：Uncaught ReferenceError: google is not defined。實際位置在 Varzea 的右側（見圖#3）

uj5u.com熱心網友回復：

你是對的，你需要定義anchor屬性。最簡單的方法是將 SVG 標記與標準標記放在同一位置并進行相應調整。15, 42顯然是不正確的。不要忘記您也在使用scale: 2圖示。

我通過使用得到最好的結果new google.maps.Point(12.25,21.5)

function initialize() {

    const myLatLng = new google.maps.LatLng(0,0);
    const mapOptions = {
        zoom: 4,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    
    const map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    
    const icon = {
      path: "M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z",
      fillColor: "red",
      fillOpacity: 1,
      scale: 2,
      strokeColor: "red",
      strokeWeight: 1,
      anchor: new google.maps.Point(12.25,21.5)
    };

    const marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: icon
    });
    
    const marker2 = new google.maps.Marker({
        position: myLatLng,
        map: map
    });
}

initialize();

#map-canvas {
  height: 150px;
}

<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

關于ReferenceError: google is not defined你將需要打開另一個問題并提供一個允許重現問題的最小、可重現的示例。

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/477134.html

標籤：反应谷歌地图

上一篇：使用PySpark、Python或Shell決議多行CSV

下一篇：谷歌地圖API使用dragend更新多個標記之一