텍스트 라벨은 내가 최근에 Google지도에 v3으로 v2에서 마이그레이션 및

를 v3으로 내가 타사 라이브러리 (BpLabel)텍스트 라벨은 내가 최근에 Google지도에 v3으로 v2에서 마이그레이션 및

The text labels in the map

를 사용하여 구현 한 텍스트 라벨을 사용하고 있었다 파산 기능 중 하나

질문 :
"mouseover"와 같은 이벤트가 트리거되는 Google Maps v3에 텍스트 라벨을 표시하려면 어떻게해야합니까? 참고 : 마커를 텍스트 레이블과 함께 표시하지 않습니다. 난 단지 텍스트 lable가 표시되고 싶어

나는 봤어 무엇 :

이 InfoWindow는을 사용하지만, 너무 복잡하고 내가 할 오버레이를 필요로하는 반면 오버레이가 명시 적으로 닫아야 마우스 포인터를 가져 가면 닫힌 이상이

어떤 도움을 유발하지 않는

중고 인포 박스, 비슷한 문제는 매우 감사하겠습니다.

건배,
Rohitesh

출처

2013-11-22 Rohitesh

나는이 갈 수있는 유일한 방법은, 즉 레이블로 마커를 사용하여 원하는 라벨 마커의 모양을 변경하는 것입니다 생각합니다. 두 가지 아이디어가 있습니다.

1) 사용자 정의 모양과 텍스트가있는 수정 된 마커를 사용하십시오. Google Image Charts 및 Infographics (예 : here 또는 here)을 사용하여 생성 된 이미지 아이콘 하지만 the google API to create such icons is deprecated without remedy! Or isn't?? 혼란이 있습니다. 내 의견을 참조하십시오.

2) 사용 "마커의지도 텍스트를 구글"인터넷 검색으로 쉽게 찾을 markerwithlabel library(). 이 라이브러리를 사용하면 마커 아이콘이 있거나없는 레이블로 마커를 정의 할 수 있습니다. 당신이 마커 아이콘을 원하지 않는 경우, 단지 icon: {}을 설정

var marker = new MarkerWithLabel({ 
    position: homeLatLng, 
    draggable: true, 
    raiseOnDrag: true, 
    map: map, 
    labelContent: "$425K", 
    labelAnchor: new google.maps.Point(22, 0), 
    labelClass: "labels", // the CSS class for the label 
    icon: {} 
});

는 그럼 당신은 정상 마커로 작업 할 수 있습니다, 즉 마우스 오버 이벤트에 대한 InfoWindow는 추가!

Here is the example how to use this library for what you need.

경쟁 금지 코드 :

       <!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>MarkerWithLabel Mouse Events</title> 
<style type="text/css"> 
    .labels { 
    color: red; 
    background-color: white; 
    font-family: "Lucida Grande", "Arial", sans-serif; 
    font-size: 10px; 
    font-weight: bold; 
    text-align: center; 
    width: 40px; 
    border: 2px solid black; 
    white-space: nowrap; 
    } 
</style> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script> 
<!-- <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/src/markerwithlabel.js"></script>--> 
<script type="text/javascript" src="markerwithlabel.js"></script> 
<script type="text/javascript"> 
    function initMap() { 
    var latLng = new google.maps.LatLng(49.47805, -123.84716); 
    var homeLatLng = new google.maps.LatLng(49.47805, -123.84716); 

    var map = new google.maps.Map(document.getElementById('map_canvas'), { 
     zoom: 12, 
     center: latLng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var marker = new MarkerWithLabel({ 
     position: homeLatLng, 
     draggable: true, 
     raiseOnDrag: true, 
     map: map, 
     labelContent: "$425K", 
     labelAnchor: new google.maps.Point(22, 0), 
     labelClass: "labels", // the CSS class for the label 
     icon: {} 
    }); 

    var iw = new google.maps.InfoWindow({ 
     content: "Home For Sale" 
    }); 

var ibOptions = { 
    content: 'content' 
    // other options 
}; 

var ib = new google.maps.InfoWindow(ibOptions); 

ib.open(map, this); 
    google.maps.event.addListener(marker, "mouseover", function (e) { ib.open(map, this); }); 
    google.maps.event.addListener(marker, "mouseout", function (e) { ib.close(map, this); }); 


    } 

</script> 
</head> 
<body onload="initMap()"> 
<p>Try interacting with the marker (mouseover, mouseout, click, double-click, mouse down, mouse up, drag) to see a log of events that are fired. Events are fired whether you are interacting with the marker portion or the label portion.</p> 
<div id="map_canvas" style="height: 400px; width: 100%;"></div> 
</body> 
</html>

출처

2013-11-24 16:24:02 TMS

@Tomas 마커 라벨 라이브러리는 모든 마커를 한 곳에 배치하고 있습니까? 어떻게 대응점에 각 마커를 표시 할 수 있습니까? – justin

@TMS : 모든 마커의 내용 상자가 한 곳에서옵니다. 이것은 버그인가요, 아니면 뭔가 빠졌는가? –

@JitendraPancholi 이것은 가능한 일을 보여주기위한 예일 뿐이므로이를 목적에 맞게 미세 조정해야 할 수도 있습니다. – TMS

당신은 인포 박스를 사용할 수 있지만지도에 이벤트 리스너를 추가하여 가져가 이벤트를 사용할 수 없습니다. 정보 상자 (기본 클래스는 infobox)에 클래스를 추가 할 수 있으므로 jQuery 또는 JavaScript를 사용하여 호버 이벤트를 직접 추가 할 수 있어야합니다.

$('.regionLabel').hover(function(){}, function(){});

또는

document.getElementsByClassName('regionLabel).addEventListener('mouseover', ...)

var regionsMarkerInfo = [{markerLabel: 'Label Name', coordinates: [50, -120], markerTranslation: "Label Name"}, { another object }, etc... ], 
    regionsOptions = [], 
    regionLabel = []; 

for(var r=0; r<regionsMarkerInfo.length; r++){ 
      regionsOptions[r] = { 
      content: "<a href='http://"+window.location.host+"/Destinations/Regions/" + regionsMarkerInfo[r].markerLabel + ".aspx'>"+ regionsMarkerInfo[r].markerTranslation + "</a>" 
      ,boxStyle: { 
      textAlign: "left" 
      ,fontSize: "18px" 
      ,whiteSpace: "nowrap" 
      ,lineHeight: "16px" 
      ,fontWeight: "bold" 
      ,fontFamily: "Tahoma" 
      } 
      ,disableAutoPan: true 
      ,position: new google.maps.LatLng(regionsMarkerInfo[r].coordinates[0], regionsMarkerInfo[r].coordinates[1]) 
      ,closeBoxURL: "" 
      ,isHidden: false 
      ,pane: "floatPane" 
      ,enableEventPropagation: true 
      ,boxClass: "regionLabel" 
      }; 

      regionLabel[r] = new InfoBox(regionsOptions[r]); 
      regionLabel[r].open(map); 
     }

이 그럼 당신은 호버 이벤트를 만들기 위해이 작업을 수행 할 수 있어야한다 : 여기 내가하지 않도록 사용하는 코드가 레이블 마커를 표시입니다 작동 중인지 확인해야하는 경우 :

여기로 이동 : http://travelalaska.dawleyassociates.com/Destinations/Regions.aspx
콘솔을 열고 $ ('.Label'). {console.log ('공개');});
큰 라벨 위로 마우스를 올리면 콘솔에 텍스트가 출력됩니다.

출처

2013-11-24 17:23:28 brouxhaha

URL이 SVG 이미지 인 아이콘을 사용하도록 Google지도에 지시 할 수 있습니다. 대부분의 브라우저에서 이것은 데이터 URI 일 수도 있습니다. 클라이언트 측에서 원하는 마커에 적합한 SVG를 생성하는 방법을 알고 있다면이를 수행 한 다음 Base64 라이브러리를 사용하여 SVG 문자열을 Base64 데이터로 변환하고 'data : image/svg + xml; base64 '로 설정하고 데이터 URI로 사용할 수 있습니다.

Internet Explorer가 좀 더 까다로워 보이는 것을 알았습니다. 렌더링 할 SVG를 얻으려면 scaledSize 속성뿐만 아니라 일반적인 크기, 원점, 앵커 및 url 속성도 필요하다는 것을 알았습니다.

이 방법을 사용하면 스타일이 지정된 텍스트를 포함한 전체 SVG 이미지를 사용할 수 있으므로 원하는 스타일로 레이블이있는 마커를 만들 수 있습니다.

출처

2015-06-17 14:55:20

텍스트 라벨은 내가 최근에 Google지도에 v3으로 v2에서 마이그레이션 및

답변

관련 문제