javascript - Google マップ V3 で番号付きの地図マーカーを作成するにはどうすればよいですか?

Question

複数のマーカーがあるマップに取り組んでいます。

これらのマーカーはカスタムアイコンを使用していますが、その上に数字も追加したいと考えています。古いバージョンの API を使用してこれがどのように達成されたかを見てきました。V3でこれを行うにはどうすればよいですか?

*注 - 「タイトル」属性は、マーカーの上にマウスを置くとツールチップを作成しますが、カスタム画像の上にマウスを置いていなくても、カスタム画像の上に重ねられる何かが必要です。

マーカークラスのドキュメントは次のとおりです。これらの属性はどれも役に立たないようです: http://code.google.com/apis/maps/documentation/v3/reference.html#MarkerOptions

score 64 · Accepted Answer

残念ながら、それは非常に簡単ではありません。OverlayViewクラス（例）に基づいて独自のカスタムマーカーを作成し、カウンターを含む独自のHTMLをその中に入れることができます。これにより、非常に基本的なマーカーが残り、ドラッグしたりシャドウを簡単に追加したりすることはできませんが、非常にカスタマイズ可能です。

または、デフォルトのマーカーにラベルを追加することもできます。これはカスタマイズ性が低くなりますが、機能するはずです。また、標準マーカーが行うすべての便利な機能を保持します。

オーバーレイの詳細については、Googleの記事「MVCオブジェクトの楽しみ」を参照してください。

編集：JavaScriptクラスを作成したくない場合は、GoogleのChartAPIを使用できます。例えば：

番号付きマーカー：

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000

テキストマーカー：

http://chart.apis.google.com/chart?chst=d_map_spin&chld=1|0|FF0000|12|_|foo

これはすばやく簡単なルートですが、カスタマイズ性が低く、マーカーごとにクライアントが新しい画像をダウンロードする必要があります。

score 47 · Accepted Answer

これは私がV3で行う方法です：

まず、Google マップ API をロードし、コールバックメソッド内で、ここで見つけたMarkerWithLabel.jsinitialize()をロードします。

function initialize() {

            $.getScript("/js/site/marker/MarkerWithLabel.js#{applicationBean.version}", function(){

            var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(currentLat, currentLng),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                streetViewControl: false,
                mapTypeControl: false
            };

            var map = new google.maps.Map(document.getElementById('mapholder'),
                    mapOptions);

            var bounds = new google.maps.LatLngBounds();

            for (var i = 0; i &lt; mapData.length; i++) {
                createMarker(i+1, map, mapData[i]); <!-- MARKERS! -->
                extendBounds(bounds, mapData[i]);
            }
            map.fitBounds(bounds);
            var maximumZoomLevel = 16;
            var minimumZoomLevel = 11;
            var ourZoom = defaultZoomLevel; // default zoom level

            var blistener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
                if (this.getZoom(map.getBounds) &gt; 16) {
                    this.setZoom(maximumZoomLevel);
                }
                google.maps.event.removeListener(blistener);
            });
            });
        }

        function loadScript() {
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=places&amp;sensor=false&amp;callback=initialize";
            document.body.appendChild(script);
        }

        window.onload = loadScript;

    </script>

次に、次の方法でマーカーを作成しますcreateMarker()。

function createMarker(number, currentMap, currentMapData) {

   var marker = new MarkerWithLabel({
       position: new google.maps.LatLng(currentMapData[0], currentMapData[1]),
                 map: currentMap,
                 icon: '/img/sticker/empty.png',
                 shadow: '/img/sticker/bubble_shadow.png',
                 transparent: '/img/sticker/bubble_transparent.png',
                 draggable: false,
                 raiseOnDrag: false,
                 labelContent: ""+number,
                 labelAnchor: new google.maps.Point(3, 30),
                 labelClass: "mapIconLabel", // the CSS class for the label
                 labelInBackground: false
                });
            }

mapIconLabelクラスをマーカーに追加したので、CSS にいくつかの CSS ルールを追加できます。

.mapIconLabel {
    font-size: 15px;
    font-weight: bold;
    color: #FFFFFF;
    font-family: 'DINNextRoundedLTProMediumRegular';
}

結果は次のとおりです。

MarkerWithIconAndLabel

score 27 · Accepted Answer

回答にコメントするのに十分な評判はありませんが、GoogleChartAPIは非推奨になっていることに注意してください。

APIホームページから：

Google Chart Toolsのインフォグラフィック部分は、2012年4月20日をもって正式に廃止されました。

score 12 · Accepted Answer

@ZuzELに似たソリューションを使用してこれを行いました。

デフォルトのソリューション ( http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000 ) を使用する代わりに、JavaScript を使用して、サーバー側のコードなしでこれらの画像を自由に作成できます。 .

Google google.maps.Marker は、アイコンプロパティに Base64 を受け入れます。これにより、SVG から有効な Base64 を作成できます。

この Plunker で、この画像と同じものを生成するコードを確認できます: http://plnkr.co/edit/jep5mVN3DsVRgtlz1GGQ?p=preview

var markers = [
  [1002, -14.2350040, -51.9252800],
  [2000, -34.028249, 151.157507],
  [123, 39.0119020, -98.4842460],
  [50, 48.8566140, 2.3522220],
  [22, 38.7755940, -9.1353670],
  [12, 12.0733335, 52.8234367],
];

function initializeMaps() {
  var myLatLng = {
    lat: -25.363,
    lng: 131.044
  };

  var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 4,
    center: myLatLng
  });

  var bounds = new google.maps.LatLngBounds();

  markers.forEach(function(point) {
    generateIcon(point[0], function(src) {
      var pos = new google.maps.LatLng(point[1], point[2]);

      bounds.extend(pos);

      new google.maps.Marker({
        position: pos,
        map: map,
        icon: src
      });
    });
  });

  map.fitBounds(bounds);
}

var generateIconCache = {};

function generateIcon(number, callback) {
  if (generateIconCache[number] !== undefined) {
    callback(generateIconCache[number]);
  }

  var fontSize = 16,
    imageWidth = imageHeight = 35;

  if (number >= 1000) {
    fontSize = 10;
    imageWidth = imageHeight = 55;
  } else if (number < 1000 && number > 100) {
    fontSize = 14;
    imageWidth = imageHeight = 45;
  }

  var svg = d3.select(document.createElement('div')).append('svg')
    .attr('viewBox', '0 0 54.4 54.4')
    .append('g')

  var circles = svg.append('circle')
    .attr('cx', '27.2')
    .attr('cy', '27.2')
    .attr('r', '21.2')
    .style('fill', '#2063C6');

  var path = svg.append('path')
    .attr('d', 'M27.2,0C12.2,0,0,12.2,0,27.2s12.2,27.2,27.2,27.2s27.2-12.2,27.2-27.2S42.2,0,27.2,0z M6,27.2 C6,15.5,15.5,6,27.2,6s21.2,9.5,21.2,21.2c0,11.7-9.5,21.2-21.2,21.2S6,38.9,6,27.2z')
    .attr('fill', '#FFFFFF');

  var text = svg.append('text')
    .attr('dx', 27)
    .attr('dy', 32)
    .attr('text-anchor', 'middle')
    .attr('style', 'font-size:' + fontSize + 'px; fill: #FFFFFF; font-family: Arial, Verdana; font-weight: bold')
    .text(number);

  var svgNode = svg.node().parentNode.cloneNode(true),
    image = new Image();

  d3.select(svgNode).select('clippath').remove();

  var xmlSource = (new XMLSerializer()).serializeToString(svgNode);

  image.onload = (function(imageWidth, imageHeight) {
    var canvas = document.createElement('canvas'),
      context = canvas.getContext('2d'),
      dataURL;

    d3.select(canvas)
      .attr('width', imageWidth)
      .attr('height', imageHeight);

    context.drawImage(image, 0, 0, imageWidth, imageHeight);

    dataURL = canvas.toDataURL();
    generateIconCache[number] = dataURL;

    callback(dataURL);
  }).bind(this, imageWidth, imageHeight);

  image.src = 'data:image/svg+xml;base64,' + btoa(encodeURIComponent(xmlSource).replace(/%([0-9A-F]{2})/g, function(match, p1) {
    return String.fromCharCode('0x' + p1);
  }));
}

initializeMaps();

#map_canvas {
  width: 100%;
  height: 300px;
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    
  </head>

  <body>
    <div id="map_canvas"></div>
  </body>
  
  <script src="script.js"></script>

</html>

このデモでは、D3.js を使用して SVG を作成し、SVG をキャンバスに変換して、必要に応じて画像のサイズを変更し、その後、キャンバスの toDataURL メソッドから Base64 を取得します。

このデモはすべて、私の仲間の@thiago-mataコードに基づいています。彼に称賛を。

score 9 · Accepted Answer

これはどう？(2015年)

1) カスタムマーカーイメージを取得します。

var imageObj = new Image();
    imageObj.src = "/markers/blank_pin.png";

2) を作成し、canvasそのRAM上にこの画像を描画します

imageObj.onload = function(){
    var canvas = document.createElement('canvas');
    var context = canvas.getContext("2d");
    context.drawImage(imageObj, 0, 0);
}

3) その上に何かを書く

context.font = "40px Arial";
context.fillText("54", 17, 55);

4) キャンバスから生データを取得し、URL の代わりに Google API に提供する

var image = {
    url: canvas.toDataURL(),
 };
 new google.maps.Marker({
    position: position,
    map: map,
    icon: image
 });

完全なコード:

function addComplexMarker(map, position, label, callback){
    var canvas = document.createElement('canvas');
    var context = canvas.getContext("2d");
    var imageObj = new Image();
    imageObj.src = "/markers/blank_pin.png";
    imageObj.onload = function(){
        context.drawImage(imageObj, 0, 0);

        //Adjustable parameters
        context.font = "40px Arial";
        context.fillText(label, 17, 55);
        //End

        var image = {
            url: canvas.toDataURL(),
            size: new google.maps.Size(80, 104),
            origin: new google.maps.Point(0,0),
            anchor: new google.maps.Point(40, 104)
        };
        // the clickable region of the icon.
        var shape = {
            coords: [1, 1, 1, 104, 80, 104, 80 , 1],
            type: 'poly'
        };
        var marker = new google.maps.Marker({
            position: position,
            map: map,
            labelAnchor: new google.maps.Point(3, 30),
            icon: image,
            shape: shape,
            zIndex: 9999
        });
        callback && callback(marker)
    };
});

score 5 · Accepted Answer

Google マップバージョン 3 には、マーカーラベルのサポートが組み込まれています。独自の画像を生成したり、サードパーティのクラスを実装したりする必要はもうありません。マーカーラベル

score 3 · Accepted Answer

ある程度のプログラミングスキルがあれば、サーバー側でラベル付きアイコンを生成することは十分に可能です。PHP に加えて、サーバーには GD ライブラリが必要です。数年前からうまく機能していますが、アイコン画像を同期させるのは確かに難しいです。

いくつかのパラメーターを送信して空白のアイコン、テキスト、色、適用する bgcolor を定義することで、AJAX を介してこれを行います。これが私のPHPです：

header("Content-type: image/png");
//$img_url = "./icons/gen_icon5.php?blank=7&text=BB";

function do_icon ($icon, $text, $color) {
$im = imagecreatefrompng($icon);
imageAlphaBlending($im, true);
imageSaveAlpha($im, true);

$len = strlen($text);
$p1 = ($len <= 2)? 1:2 ;
$p2 = ($len <= 2)? 3:2 ;
$px = (imagesx($im) - 7 * $len) / 2 + $p1;
$font = 'arial.ttf';
$contrast = ($color)? imagecolorallocate($im, 255, 255, 255): imagecolorallocate($im, 0, 0, 0); // white on dark?

imagestring($im, $p2, $px, 3, $text, $contrast);    // imagestring  ( $image, $font, $x, $y, $string, $color)

imagepng($im);
imagedestroy($im);
}
$icons =   array("black.png", "blue.png", "green.png", "red.png", "white.png", "yellow.png", "gray.png", "lt_blue.png", "orange.png");      // 1/9/09
$light =   array( TRUE,         TRUE,       FALSE,       FALSE,     FALSE,      FALSE,      FALSE,          FALSE,      FALSE);     // white text?

$the_icon = $icons[$_GET['blank']];             // 0 thru 8 (note: total 9)
$the_text = substr($_GET['text'], 0, 3);        // enforce 2-char limit
do_icon ($the_icon, $the_text,$light[$_GET['blank']] );

次のようなものを介してクライアント側で呼び出されます。

score 2 · Accepted Answer

2

Google Charts APIを使用してこの問題を解決する方法を示す私の 2 セント。

于 2010-10-10T19:56:44.667 に答える

score 0 · Accepted Answer

@ dave1010の回答に基づいていますが、リンクが更新されhttpsています。

番号付きマーカー:

https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000

テキストマーカー:

https://chart.googleapis.com/chart?chst=d_map_spin&chld=1|0|FF0000|12|_|Marker

score 0 · Accepted Answer

最も簡単な解決策 - SVG を使用する

動作環境: IE9、IE10、FF、Chrome、Safari

(他のブラウザを使用している場合は、「コードスニペットを実行」してコメントを入力してください)

Google Maps API 以外の外部依存関係はありません!

アイコンが.svg形式であれば、これは非常に簡単です。その場合は、適切なテキスト要素を追加し、その内容を JS のニーズに合わせて変更してください。

コードに次のようなものを追加します.svg(これは、後で JS で変更されるテキスト「セクション」です)。

<text id="1" fill="#20539F" font-family="NunitoSans-ExtraBold, Nunito Sans" font-size="18" font-weight="600" letter-spacing=".104" text-anchor="middle" x="50%" y="28">1</text>

例: (@EstevãoLucas から部分的にコピー)

重要: 正しい<text>タグプロパティを使用してください。中央の長い数字に注意text-anchor="middle" x="50%" y="28"してください (詳細: SVG 長方形にテキストを配置して中央に配置する方法)

使用encodeURIComponent()(これにより、おそらく IE9 および 10 との互換性が保証されます)

// Most important part (use output as Google Maps icon)
function getMarkerIcon(number) {
  // inline your SVG image with number variable
  var svg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40" viewBox="0 0 40 40"> <defs> <rect id="path-1" width="40" height="40"/> <mask id="mask-2" width="40" height="40" x="0" y="0" fill="white"> <use xlink:href="#path-1"/> </mask> </defs> <g id="Page-1" fill="none" fill-rule="evenodd"> <g id="Phone-Portrait---320" transform="translate(-209 -51)"> <g id="Group" transform="translate(209 51)"> <use id="Rectangle" fill="#FFEB3B" stroke="#F44336" stroke-width="4" mask="url(#mask-2)" xlink:href="#path-1"/> <text id="1" fill="#20539F" font-family="NunitoSans-ExtraBold, Nunito Sans" font-size="18" font-weight="600" letter-spacing=".104" text-anchor="middle" x="50%" y="28">' + number + '</text> </g> </g> </g> </svg>';
  // use SVG without base64 see: https://css-tricks.com/probably-dont-base64-svg/
  return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
}

// Standard Maps API code
var markers = [
  [1, -14.2350040, -51.9252800],
  [2, -34.028249, 151.157507],
  [3, 39.0119020, -98.4842460],
  [5, 48.8566140, 2.3522220],
  [9, 38.7755940, -9.1353670],
  [12, 12.0733335, 52.8234367],
];

function initializeMaps() {
  var myLatLng = {
    lat: -25.363,
    lng: 131.044
  };

  var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 4,
    center: myLatLng
  });

  var bounds = new google.maps.LatLngBounds();

  markers.forEach(function(point) {
      var pos = new google.maps.LatLng(point[1], point[2]);

      new google.maps.Marker({
        position: pos,
        map: map,
        icon: getMarkerIcon(point[0]),         
      });

      bounds.extend(pos);
  });

  map.fitBounds(bounds);
}

initializeMaps();

#map_canvas {
  width: 100%;
  height: 300px;
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>        
  </head>

  <body>
    <div id="map_canvas"></div>
  </body>
  
  <script src="script.js"></script>

</html>

Google マップのインライン SVG の詳細: https://robert.katzki.de/posts/inline-svg-as-google-maps-marker

score 0 · Accepted Answer

私はそれを行うための最良の方法を発見しました。Snap.svgを使用して svg を作成し、関数 toDataURL() を使用してアイコンとして含めるグラフィックデータを作成します。マーカーに SlidingMarker クラスを使用していることに注意してください。これにより、マーカーを適切に動かすことができます。Snap.svg を使用すると、あらゆる種類のグラフィックを作成でき、マップは素晴らしいものになります。

var s = Snap(100, 100);
s.text(50, 50, store.name);
// Use more graphics here.
var marker = new SlidingMarker({
  position: {lat: store.lat, lng: store.lng},
  map: $scope.map,
  label: store.name, // you do not need this
  title: store.name, // nor this
  duration: 2000,
  icon: s.toDataURL()
});

score 0 · Accepted Answer

google-maps-utility-library-v3 の Marker With Label オプションを使用できます。ここに画像の説明を入力

https://code.google.com/p/google-maps-utility-library-v3/wiki/Librariesを参照してください

score -1 · Accepted Answer

シンプルな .vbs スクリプトですばやく生成できる、更新された「ビジュアルリフレッシュ」スタイルのカスタムアイコンを次に示します。また、複数の色オプションですぐに使用できる事前に生成された大規模なセットも含めました: https://github.com/Concept211/Google-Maps-Markers

GitHub がホストするイメージファイルにリンクする場合は、次の形式を使用します。

https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_[color][character].png

色
赤、黒、青、緑、灰色、オレンジ、紫、白、黄

文字
A ～ Z、1 ～ 100、!、@、$、+、-、=、(%23 = #)、(%25 = %)、(%26 = &)、(空白 = •)

例:

https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_red1.png

https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_blue2.png

https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_green3.png

javascript - Google マップ V3 で番号付きの地図マーカーを作成するにはどうすればよいですか?

17 に答える 17

これはどう？(2015年)

Related

Reference