javascript map - Google지도 V3에 번호가 매겨진지도 아이콘을 만들려면 어떻게해야합니까?




marker label (13)

나는 그것에 여러 마커가있는지도에서 일하고 있습니다.

이 마커는 맞춤 아이콘을 사용하지만 맨 위에 숫자를 추가하고 싶습니다. 이전 버전의 API를 사용하여 이것이 어떻게 이루어 졌는지 보았습니다. V3에서 어떻게 할 수 있습니까?

* 참고 - 'title'속성은 마커를 마우 스 오버 할 때 툴팁을 생성하지만 사용자가 위에 올려 놓지 않아도 맞춤 이미지 상단에 겹칠 항목을 원합니다.

마커 클래스에 대한 설명서는 다음과 같습니다. http://code.google.com/apis/maps/documentation/v3/reference.html#MarkerOptions


Answers

이것이 내가 V3에서하는 일 :

먼저 Google지도 API를로드하고 콜백 메소드 initialize() 내에서 MarkerWithLabel.js 를로드하여 시작 합니다.

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 < 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';
}

결과는 다음과 같습니다.


이 사이트에 제공된 출처에서 번호가 매겨진 일련의 아이콘을 다운로드 할 수 있습니다.

그런 다음 다음을 수행 할 수 있어야합니다.

<!DOCTYPE html>
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps Demo</title> 
    <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false"></script> 

    <script type="text/javascript"> 
    function initialize() {

      var myOptions = {
        zoom: 11,
        center: new google.maps.LatLng(-33.9, 151.2),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

      var map = new google.maps.Map(document.getElementById("map"), myOptions);

      var locations = [
        ['Bondi Beach', -33.890542, 151.274856, 4],
        ['Coogee Beach', -33.923036, 151.259052, 5],
        ['Cronulla Beach', -34.028249, 151.157507, 3],
        ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
        ['Maroubra Beach', -33.950198, 151.259302, 1]
      ];

      for (var i = 0; i < locations.length; i++) {
          var image = new google.maps.MarkerImage('marker' + i + '.png',
                      new google.maps.Size(20, 34),
                      new google.maps.Point(0, 0),
                      new google.maps.Point(10, 34));

          var location = locations[i];
          var myLatLng = new google.maps.LatLng(location[1], location[2]);
          var marker = new google.maps.Marker({
              position: myLatLng,
              map: map,
              icon: image,
              title: location[0],
              zIndex: location[3]
          });
      }
    }
    </script> 
</head> 
<body style="margin:0px; padding:0px;" onload="initialize();"> 
    <div id="map" style="width:400px; height:500px;"></div> 
</body> 
</html>

위 예제의 스크린 샷 :

마커 뒤에 그림자를 쉽게 추가 할 수 있습니다. 이에 대한 자세한 내용은 Google Maps API 참조 : 복합 표시 자 에서 예제를 확인하십시오.


다음은 간단한 .vbs 스크립트를 통해 빠르게 생성 할 수있는 업데이트 된 "시각적 새로 고침"스타일의 사용자 지정 아이콘입니다. 또한 여러 가지 색상 옵션을 즉시 사용할 수있는 미리 생성 된 대형 세트가 포함되었습니다. https://github.com/Concept211/Google-Maps-Markers

GitHub에서 호스팅하는 이미지 파일에 연결할 때 다음 형식을 사용하십시오.

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

색깔
빨강, 검정, 파랑, 녹색, 회색, 주황색, 자주색, 흰색, 노란색

캐릭터
AZ, 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


@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

불행히도 그렇게 쉬운 일은 아닙니다. OverlayView 클래스 ( )를 기반으로 사용자 정의 마커를 만들고 카운터를 포함하여 자신의 HTML을 넣을 수 있습니다. 이렇게하면 매우 기본적인 마커가 생기고 그림자를 쉽게 드래그하거나 그림자를 추가 할 수 없지만 매우 맞춤 설정할 수 있습니다.

또는 기본 표시 자에 레이블을 추가 할 수 있습니다 . 이것은 덜 사용자 정의 할 수 있지만 작동해야합니다. 그것은 또한 표준 마커가하는 모든 유용한 것들을 유지합니다.

오버레이에 대한 자세한 내용은 Google의 기사 MVC 객체와 재미를 참조하십시오.

편집 : 자바 스크립트 클래스를 만들고 싶지 않으면 Google의 Chart API를 사용할 수 있습니다. 예 :

번호가 매겨진 마커 :

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

이것은 빠르고 쉬운 경로이지만 맞춤 설정이 쉽지 않으며 각 마커에 대해 클라이언트가 새 이미지를 다운로드해야합니다.



이건 어때? (2015 년)

1) 맞춤 마커 이미지를 가져옵니다.

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

2) RAM canvasRAM 이미지를 그 위에 그립니다.

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)
    };
});

답변에 대한 평판은 충분하지 않지만 Google Chart API는 더 이상 사용되지 않습니다.

API 홈페이지에서

Google Chart Tools의 Infographics 부분은 2012 년 4 월 20 일부터 공식적으로 지원 중단 될 예정입니다.


이것은 이제 매핑 문서에 추가되었으며 타사 코드가 필요하지 않습니다.

다음 두 샘플을 결합 할 수 있습니다.

https://developers.google.com/maps/documentation/javascript/examples/marker-labels

https://developers.google.com/maps/documentation/javascript/examples/icon-simple

이런 코드를 얻으려면 :

var labelIndex = 0;
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789';

function initialize() {
  var bangalore = { lat: 12.97, lng: 77.59 };
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 12,
    center: bangalore
  });

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng, map);
  });

  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location, map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  var marker = new google.maps.Marker({
    position: location,
    label: labels[labelIndex],
    map: map,
    icon: 'image.png'
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

마커가 35 개 이상인 경우 레이블에 첫 번째 문자 만 표시되므로이 방법은 작동하지 않습니다 (AZ를 사용하고 0-9가 35를 사용함). 이 Google지도 문제 에 투표하여이 제한 사항을 해제 해달라고 요청하십시오.


Google 차트 API 를 사용하여이 문제를 해결하는 방법을 보여주는 두 가지 센트입니다.



프로그래밍 기술이 있다면 레이블이 붙은 아이콘을 서버 측에서 생성하는 것이 가능합니다. PHP뿐만 아니라 서버에서도 GD 라이브러리가 필요합니다. 몇 년 동안 저에게 잘 작동했지만, 아이콘 이미지를 동기화하는 것은 힘들었습니다.

AJAX를 통해 몇 가지 매개 변수를 전송하여 빈 아이콘과 텍스트 및 색상뿐만 아니라 적용 할 bgcolor를 정의합니다. 여기 내 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']] ); 

다음과 같은 방법으로 클라이언트 쪽에서 호출됩니다. var image_file = "./our_icons/gen_icon.php?blank="+ 이스케이프 (icons [color]) + "& text ="+ iconStr;


많은 방법들이 효과가있을 것입니다.

  • window.location.reload();
  • history.go(0);
  • window.location.href=window.location.href;






javascript google-maps google-maps-api-3