<circle>タグ

-1

に画像を追加するにはGoogleマップを使用しています。画像を<circle>タグに入れたいと思います。だから私はこの部分でどのように画像を追加することができますか教えてください？<circle>タグ

私は以下のコードを記載しています。これは、あなたが、あなたがgoogle.maps.Markerオブジェクトを作成する必要があります（たとえば、スタティックマップなどの他のインターフェースの一つではなく）を参照しているGoogleマップのJavaScript APIであると仮定すると、..

<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>

出典

2016-09-02 Naeem Sabasara

私はおそらくあなたが望む方法であなたのメッセージを編集しました。これがあなたの意図したものでない場合は、自由にロールバックしてください。 –

を確認し、返信してください。

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オブジェクトは、あなたのイメージを指すURLとgoogle.maps.LatLngオブジェクトとして緯度と長いが必要です。

[EDIT]

はちょうど私があなたに簡単な例をドロップしようと思いました。プロットするアイテムのリストなど、これはあなたの後ろのものとは異なる場合がありますが、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キーに置き換えてください。

[END EDIT]

出典

2016-09-02 14:24:29 glennstar

サンプルを返信いただきありがとうございます。しかしそれは働いていません... –

共有できるコードはありますか？ – glennstar

私のコードをチェックしたいと思えば、私はそれを送ることができます..しかし、あなたの例としては動作していません –

<circle>タグ

答えて

関連する問題