Question

我正在使用Google地图，我想将图片放入<circle>标记。那么请指导我如何在这部分添加图像？

我在下面提到了代码。请查看并回复..

<g id="map_points">
<circle cx="421" cy="403" r="3.5" fill="#000" style="fill-opacity:0.5" id="map_points_shadow_0"/>
<circle cx="420" cy="402" r="3.5" fill="#FF0000" stroke="#FFF" stroke-width="1" id="map_points_0" cursor="pointer" style="fill: rgb(255, 0, 0);"/>
<circle cx="366" cy="411" r="3.5" fill="#000" style="fill-opacity:0.5" id="map_points_shadow_1"/>
<circle cx="365" cy="410" r="3.5" fill="#FF0000" stroke="#FFF" stroke-width="1" id="map_points_1" cursor="pointer" style="fill: rgb(255, 0, 0);"/>
</g>

Answer 1

假设这是您所指的Google Maps Javascript API（而不是静态地图等其他界面之一），那么您需要创建google.maps.Marker个对象。

使用Google提供的documentation作为参考点，您需要为要添加到地图的每个图片创建以下实例。下面的示例假设您已创建了一个google.maps.Map对象，并将其分配给名为map的javascript变量。

var location = new google.maps.LatLng( -0.127985, 51.507877 ) ;
var marker = new google.maps.Marker( {
    position: location,
    icon: "https://example.com/images/myImage.png",
    map: map
} ) ;

正如您所看到的，google.maps.Marker对象需要一个指向您的图片的网址，以及一个指向google.maps.LatLng对象的纬度和长度。

[编辑]

我想我会给你一个简单的例子。这可能不完全是您所追求的，即要绘制的项目列表等，但它应该让您公平地理解将图像放在Google地图上并作为进行自己更改的基础。

<html>
  <head>

    <style>
      #map-here {
        width: 400px ;
        height: 400px ;
        border-radius: 3px ;
      }
    </style>

  </head>
  <body>
    <div id="map-here"></div>

    <script>
      function wrapper() {
        addMapWithMarker( {
           'coords': [ 51.507877, -0.127985 ],
           'image': 'https://maps.google.com/mapfiles/kml/shapes/info-i_maps.png',
        }, 'map-here' ) ;

        function addMapWithMarker( args, id ) {
          var map = new google.maps.Map(
            document.getElementById( id ), {
              zoom: 16,
              mapTypeId: google.maps.MapTypeId.TERRAIN,
              disableDefaultUI: true,
              zoomControl: true,
              mapTypeControl: true,
              scaleControl: false,
              streetViewControl: false,
              rotateControl: false,
              fullscreenControl: false,
              center: { lat: args.coords[0], lng: args.coords[1] },
            }
          ) ;

          var infoMarker = new google.maps.Marker( {
            position: { lat: args.coords[0], lng: args.coords[1] },
            icon: args.image,
            map: map,
            title: "Lord Nelson",
          } );
        }
      }

    </script>

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=<api-key>&libraries=visualization&callback=wrapper"></script>
  </body>
</html>

将<api-key>替换为您的API密钥。

[结束编辑]

如何在<circle>标记中添加图像

1 个答案: