Question

我正在尝试添加详细信息以及html标记，但由于某些原因，我在infowindow内的标记无法识别。我在“contentString”中存储了带有地址的div标签。我已经声明了infowindow变量global并且在我的initializeMap函数中声明了infowindow = new google.maps.InfoWindow（）;

非常感谢提前......

google.maps.event.addListener(marker, 'click', function () {

var geocoder = new google.maps.Geocoder();

geocoder.geocode({ 'latLng': marker.getPosition() }, function (results, status) {

   if (status == google.maps.GeocoderStatus.OK) {

       var address = results[1].formatted_address;

       var contentString = '<div>' + address + '<div>';

       infowindow.setContent(contentString);

       infowindow.open(map, this);
   }

 });
});

Answer 1

可能是因为this不是标记？尝试使用that：

google.maps.event.addListener(marker, 'click', function () {
    var that = this;
    ...
    geocoder.geocode({ 'latLng': marker.getPosition() }, function (results, status) {
        ...
        infowindow.open(map, that);
    });
});

Answer 2

使用fromBySearch结果返回的每个服务创建我正在调用的标记的完整函数。

function createMarker(place) {

var IconType = {
   school: "../Icons/google_school.png",
   university: "../Icons/university.png",
};

var placeLoc = place.geometry.location;

var marker = new google.maps.Marker({
    map: map,
    position: placeLoc,
    icon: IconType[place.types[0]]
});

markers.push(marker);

google.maps.event.addListener(marker, 'click', function () {

var that = this;

var geocoder = new google.maps.Geocoder();

geocoder.geocode({ 'latLng': marker.getPosition() }, function (results, status) {

        if (status == google.maps.GeocoderStatus.OK) {

             var address = results[0].formatted_address;

   var infoWindow_content = '<div class="google_infoBlock">'+
                            '<div class="google_info_Title">' + place.name + '</div>'+
                            '<div class="google_info_address">' + address + '</div>' +
                            '</div>';

        infowindow.setContent(infoWindow_content);

        infowindow.open(map, that);
    }           
  });
 });
}

info block css

.google_infoBlock {
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;    
}

.google_info_Title {
   color:#B0171F;
   font-size:16px;
 }

.google_info_address {
    color:#3d3d3d;
    font-size:14px;
}

谷歌地图标记infoWindow与HTML标签和CSS风格

2 个答案:

info block css