我创建了以下方法来添加两个我的谷歌地图标记。这些结果是动态的,只要移动地图就会创建。
function addMarker2(lat, lng, hid, label, map) {
var price = label;
if (price == null)
price = "0.00"
var marker = new RichMarker({
position: new google.maps.LatLng(lat, lng),
map: map,
draggable: false,
flat: true,
//anchor: RichMarkerPosition.MIDDLE,
content: '<div data-hid="' + hid + '" class="map-tooltip">' + price + ' </div>',
id: hid
});
markers.push(marker);
marker.addListener('click', function () {
//marker.addListener('click', function (e) {
// stop event from bubbling to map click event
//e = e || window.event;
//var e = window.event || e;
event.preventDefault();
// close any open infoboxes
if (infowindow != null)
infowindow.close();
// find clicked hotel
var hotel;
$.each(hotel_json, function (i, obj) {
if (obj.hid === hid) {
hotel = obj;
}
});
// build infobox html
var contentString = '<img src="' + hotel.img + '" alt="" style="height: 150px; width: 100%"><a class="favourite-button toggle-select" id="favourite-button"><i class="fa fa-heart-o fa-2x"></i></a><h5><span style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"><a href="javascript:;" style="text-decoration: none; color: #888">' + hotel.name + '</a></span><br /><div class="mt5 text-warning-custom"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></div></h5><span>Guesthouse</span><p class="text-primary"><sup class="h6 pr5">R</sup><span class="h3">' + hotel.price + '</span><sup class="h6 pl5">ZAR</sup></p><div class="map-action-btns"><a href="javascript:;" class="btn btn-sm btn-info btn-block"><i class="fa fa-file"></i> Request Quote</a><a href="javascript:;" class="btn btn-sm btn-success btn-block"><i class="fa fa-calendar-o"></i> Book Now</a></div>';
// open infobox
infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 200
});
infowindow.open(map, marker);
});
}
如果单击自定义标记,则会显示其他信息。问题来自于event.preventDefault(),这在Chrome和IE上运行良好。我在网上尝试过多种解决方案但没有成功。希望我只是遗漏了一些简单的东西。所有帮助将不胜感激。我已经留下了一些我在评论中尝试过的东西。