如何在 Google 地图上使用 svg 图标作为标记

Question

我在 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,
};

enter image description here

仅当我放大时，标记才不指向确切位置。我尝试将其添加到图标对象中：anchor: new google.maps.Point(15, 42),，但是当我刷新页面时 returns 出现错误：未捕获的 ReferenceError：未定义 google。实际位置在Varzea的右侧（见图#3）

Answer 1

你说得对，你需要定义anchor属性。最简单的方法是将 SVG 标记与 standard 标记放在同一位置并进行相应调整。 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 你需要打开另一个问题并提供一个 Minimal, Reproducible Example 允许重现问题。

如何在 Google 地图上使用 svg 图标作为标记

How to use svg icon as Marker on Google Maps

reactjs

google-maps