ノーマルマーカーのようなGoogleマップのカスタムオーバーレイに情報ウィンドウを追加する方法

Question

Googleマップjavascript Apiに新しいです。私のapplication.nowにカスタムオーバーレイを使用してカスタムマーカーを追加しました。カスタムマーカーにinfoWindowを追加したいaddDomListenerメソッドを使用して、アラートを追加することが私の次のコード

if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function (pos) { 
     var myLatLng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude); 
     // var userObj = {} 

     function CustomMarker(latlng, map, imageSrc) { 
     this.latlng_ = latlng; 
     this.imageSrc = imageSrc; 

     // Once the LatLng and text are set, add the overlay to the map. This will 
     // trigger a call to panes_changed which should in turn call draw. 
     this.setMap(map); 
     } 

     CustomMarker.prototype = new google.maps.OverlayView(); 

     CustomMarker.prototype.draw = function() { 
     // Check if the div has been created. 
     var div = this.div_; 
     if (!div) { 
      // Create a overlay text DIV 
      div = this.div_ = document.createElement('div'); 
      // Create the DIV representing our CustomMarker 
      div.className = "customMarker" 


      var img = document.createElement("img"); 
      img.src = this.imageSrc; 
      div.appendChild(img); 
      google.maps.event.addDomListener(div, "click", function (event) { 
       google.maps.event.trigger(me, "click"); 
      }); 

      // Then add the overlay to the DOM 
      var panes = this.getPanes(); 
      panes.overlayImage.appendChild(div); 
     } 

     // Position the overlay 
     var point = this.getProjection().fromLatLngToDivPixel(this.latlng_); 
     console.log("ss :"+point.x) 
     if (point) { 
      div.style.left = point.x + 'px'; 
      div.style.top = point.y + 'px'; 
     } 
     }; 

     CustomMarker.prototype.remove = function() { 
     // Check if the overlay was on the map and needs to be removed. 
     if (this.div_) { 
      this.div_.parentNode.removeChild(this.div_); 
      this.div_ = null; 
     } 
     }; 

     CustomMarker.prototype.getPosition = function() { 
     return this.latlng_; 
     }; 
     CustomMarker.prototype.setPosition = function (latlng_) { 
     this.latlng_=latlng_; 
     this.draw(); 
     }; 
     var map = new google.maps.Map(document.getElementById("map"), { 
     zoom: 15, 
     center:myLatLng 
     }); 
     UserService.GetCurrent().then(function (user) { 
     $scope.user = user; 
     currentUser = user 
     user.lat = myLatLng; 
     user.mission = room; 
     socket.emit('subscribe', user); 
     interval= setInterval(getNewCords, 2000); 
     // $interval.cancel(interval); 
     console.log("ssa :"+angular.toJson(interval)) 
     }); 
     var infowindow = new google.maps.InfoWindow(); 

     socket.on('userList', function (userList) { 
     for (var i = 0; i < markers.length; i++) { 
      markers[i].setMap(null); 
     } 
     console.log(userList[i].icon); 
     for (var i = 0; i < userList.length; i++) { 
      marker[userList[i].pseudoName]= new CustomMarker(new google.maps.LatLng(userList[i].lat.lat,userList[i].lat.lng), map, userList[i].icon) 
      markers.push(marker[userList[i].pseudoName]); 

     } 


     }); 

    }) 

    } else { 
    alert('Geo Location feature is not supported in this browser.'); 
    } 

を見つけてください、私のカスタムマーカー参照 custom marker

を見つけてくださいアレクセイZuevcustom overlay example

にjsのフィドルクレジットの下に見つけます

Answer 1

あなたのフィドルに情報ウィンドウコードを追加しました。投稿されたコードが異なるようです。 とにかく、あなたのinitialize()機能をこれに変更しました。 、それをテストする上でそのコードをコピーして、あなたが投稿したフィドルからあなたinitialize()関数にそれを交換する

function initialize() { 
    var myLatlng = new google.maps.LatLng(-33.9,151.2), 
    mapOptions = { 
     zoom: 15, 
     center: myLatlng, 
     disableDefaultUI: true 
    }; 

    var map = new google.maps.Map(document.getElementById('map'), mapOptions); 
    var markers = [ 
    { 
     latLan: new google.maps.LatLng(-33.9,151.2), 
     icon: 'cutlery', 
     color: '#346698', 
     fontSize: '35px' 
    }, 
    { 
     latLan: new google.maps.LatLng(-33.8939,151.207333), 
     icon: 'anchor', 
     color: '#B90C13', 
     fontSize: '35px' 
    }, 
    { 
     latLan: new google.maps.LatLng(-33.895,151.195), 
     icon: 'automobile', 
     color: '#39A00F', 
     fontSize: '35px' 
    }, 
    { 
     latLan: new google.maps.LatLng(-33.905,151.195), 
     icon: 'headphones', 
     color: '#000', 
     fontSize: '35px' 
    }, 
    { 
     latLan: new google.maps.LatLng(-33.9039,151.207333), 
     icon: 'child', 
     color: '#26C2C3', 
     fontSize: '35px' 
    }, 
    ] 

    markers.forEach(function(item) { 
    var markerstemp = new FontAwesomeMarker(
     item.latLan, 
     map, 
     { 
     icon: item.icon, 
     color: item.color, 
     fontSize: item.fontSize 
     } 
    ); 

    //info window code starts here 
    var infoWindow = new google.maps.InfoWindow(); 
    (function (markerstemp) { 
       google.maps.event.addListener(markerstemp, "click", function (e) { 
        //Wrap the content inside an HTML DIV in order to set height and width of InfoWindow. 
        infoWindow.setContent("\<div style = \'width:auto;color:#000;font-size:12px;font-weight:500;padding:5px;\'\>Aww\</div\>"); 
        infoWindow.open(map, markerstemp); 
       }); 
      })(markerstemp); 
    }); 
} 

。