Google지도 도구 설명

Question

누군가 제발 나를 도울 수 있는지 궁금합니다.

저는 Google지도에 표시하는 마커에 대한 툴팁에 대해 작업 해 왔습니다. 이 코드는 사용자가 볼 수있는 정보 (이 경우에는 필드 이름과 주소)를 표시하도록 작동하도록 할 수 있으므로 코드 줄은 title: name+address입니다.

누군가가이 두 단어 사이에 공백을 넣을 수 있다고 말하면 툴팁에 '이름 주소'가 아닌 '이름 주소'가 표시됩니다.

예를 들어 모든 것을 시도해 보았습니다. title: name'_'+ address, title: name' '+address 그리고 제대로 작동하지 않습니다.

도움을 주시면 감사하겠습니다.

많은 감사

크리스

Answer 1

나는 시작 값을 초기화하는이 기능을 사용

//Inicialize map values 
function initialize() { 

     latCenterMap=41.50347; 
     lonCenterMap=-5.74638; 
     zommCeneterMap=14; 
     latPoint=41.50347; 
     lonPoint=-5.74638; 


     //Values default initialize 
     var latlng = new google.maps.LatLng(latCenterMap, lonCenterMap); 

     var mapOptions = { 
      zoom: zommCeneterMap, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     map = new google.maps.Map(document.getElementById('map-canvas_'), mapOptions);  

     codePoint(map, lat, lon);          
} 

내가지도에 값을 소수점 위치를 설정하려면이 기능을 사용을

//Get position by Latitude and Longitude   
function codePoint(map, lat, lon) { 

    var latlng = new google.maps.LatLng(parseFloat(lat), parseFloat(lon)); 
    var title = "Your text"; 

    var iconPoint = new google.maps.MarkerImage('images/pointBlue.png', 
     //Measure image 
     new google.maps.Size(25,25), 
     new google.maps.Point(0,0), 
     //Half measure image 
     new google.maps.Point(12.5,12.5) 
    ); 

    marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     icon: iconPoint, 
     tooltip: title 
    }); 

    customTooltip(marker); 
} 

나는 위치

를 가리 키도록 툴팁을 만들려면이 기능을 사용

//TOOLTIP 
function customTooltip(marker){ 

    // Constructor function 
    function Tooltip(opts, marker) { 
     // Initialization 
     this.setValues(opts); 
     this.map_ = opts.map; 
     this.marker_ = marker; 
     var div = this.div_ = document.createElement("div"); 
     // Class name of div element to style it via CSS 
     div.className = "tooltip"; 
     this.markerDragging = false; 
    } 

    Tooltip.prototype = { 
     // Define draw method to keep OverlayView happy 
     draw: function() {}, 

     visible_changed: function() { 
      var vis = this.get("visible"); 
      this.div_.style.visibility = vis ? "visible" : "hidden"; 
     }, 

     getPos: function(e) { 
      var projection = this.getProjection(); 
      // Position of mouse cursor 
      var pixel = projection.fromLatLngToDivPixel(e.latLng); 
      var div = this.div_; 

      // Adjust the tooltip's position 
      var gap = 15; 
      var posX = pixel.x + gap; 
      var posY = pixel.y + gap; 

      var menuwidth = div.offsetWidth; 
      // Right boundary of the map 
      var boundsNE = this.map_.getBounds().getNorthEast(); 
      boundsNE.pixel = projection.fromLatLngToDivPixel(boundsNE); 

      if (menuwidth + posX > boundsNE.pixel.x) { 
       posX -= menuwidth + gap; 
      } 
      div.style.left = posX + "px"; 
      div.style.top = posY + "px"; 

      if (!this.markerDragging) { 
       this.set("visible", true); 
      }     
     }, 
     // This is added to avoid using listener (Listener is not working when Map is quickly loaded with icons) 
     getPos2: function(latLng) { 
      var projection = this.getProjection(); 
      // Position of mouse cursor 
      var pixel = projection.fromLatLngToDivPixel(latLng); 
      var div = this.div_; 
      // Adjust the tooltip's position 
      var gap = 5; 
      var posX = pixel.x + gap; 
      var posY = pixel.y + gap; 
      var menuwidth = div.offsetWidth; 
      // Right boundary of the map 
      var boundsNE = this.map_.getBounds().getNorthEast(); 
      boundsNE.pixel = projection.fromLatLngToDivPixel(boundsNE); 
      if (menuwidth + posX > boundsNE.pixel.x) { 
       posX -= menuwidth + gap; 
      } 
      div.style.left = posX + "px"; 
      div.style.top = posY + "px"; 
      if (!this.markerDragging) { 
       this.set("visible", true); 
      } 
     }, 

     addTip: function() { 
      var me = this; 
      var g = google.maps.event; 
      var div = me.div_; 
      div.innerHTML = me.get("text").toString(); 
      // Tooltip is initially hidden 
      me.set("visible", false); 
      // Append the tooltip's div to the floatPane 
      me.getPanes().floatPane.appendChild(this.div_); 
      // In IE this listener gets randomly lost after it's been cleared once. 
      // So keep it out of the listeners array. 
      g.addListener(me.marker_, "dragend", function() { 
       me.markerDragging = false; }); 
       // Register listeners 
       me.listeners = [ 
       // g.addListener(me.marker_, "dragend", function() { 
       // me.markerDragging = false; }), 
        g.addListener(me.marker_, "position_changed", function() { 
         me.markerDragging = true; 
         me.set("visible", false); }), 

        g.addListener(me.map_, "mousemove", function(e) { 
         me.getPos(e); }) 
      ]; 
      }, 

      removeTip: function() { 

       // Clear the listeners to stop events when not needed. 
       if (this.listeners) { 
        for (var i = 0, listener; listener = this.listeners[i]; i++) { 
         google.maps.event.removeListener(listener); 
        } 
        delete this.listeners; 
       } 
       // Remove the tooltip from the map pane. 
       var parent = this.div_.parentNode; 
        if (parent) parent.removeChild(this.div_); 
       } 
      }; 

     function inherit(addTo, getFrom) { 

      var from = getFrom.prototype; // prototype object to get methods from 
      var to = addTo.prototype;  // prototype object to add methods to 
      for (var prop in from) { 
      if (typeof to[prop] == "undefined") to[prop] = from[prop]; 
      } 
     } 

     // Inherits from OverlayView from the Google Maps API 
     inherit(Tooltip, google.maps.OverlayView); 

     var tooltip = new Tooltip({map: map}, marker); 
     tooltip.bindTo("text", marker, "tooltip"); 

     google.maps.event.addListener(marker, 'mouseover', function() { 
      tooltip.addTip(); 
      tooltip.getPos2(marker.getPosition()); 
     }); 

     google.maps.event.addListener(marker, 'mouseout', function() { 
      tooltip.removeTip(); 
     }); 
} 

이 스타일을 CSS 파일

0123으로 사용합니다.

//CSS 
.tooltip { 
    position:absolute; 
    top:0; 
    left:0; 
    z-index: 300; 
    width: 11.5em; 
    padding: 5px; 
    font-size: 12pt; 
    font-family: klavika; 
    color: #fff; 
    background-color: #04A2CA; 
    border-radius: 10px; 
    box-shadow: 2px 2px 5px 0 rgba(50, 50, 50, 0.75); 
} 

Answer 2

당신이

name + ' ' + address 

NB을 시도 할 수 있습니다 : 당신은 따옴표의 공간과 양쪽에 +이 필요합니다.