Question

我是谷歌地图的新手javascript Api。我已经在我的应用程序中使用自定义叠加添加了自定义标记。现在我想将infoWindow添加到自定义marker.i我能够使用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

在 Alexey Zuev custom overlay example

中找到以下js小提琴

Answer 1

我将信息窗口代码添加到您的小提琴中。您发布的代码似乎有所不同无论如何，我将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);
  });
}

要对此进行测试，请复制上面的代码并将其替换为您发布的小提琴中的initialize()函数。

如何在谷歌地图中添加信息窗口到自定义叠加层，如普通标记

1 个答案: