Gmaps.js - 如何将“指针”添加到叠加层并使其可点击？

-1

我正在使用GMaps.js在一张地图上显示多个叠加层（类似于AirBNB的地图）。我很新的JavaScript和GMaps API所以我用2个下列问题有困难：Gmaps.js - 如何将“指针”添加到叠加层并使其可点击？

我可以自定义风格的叠加，但是，当他们出现在屏幕上，他们缺少的“指示器”（又名矩形底部的小三角形位），而不是显示为简单的矩形。我怎样才能添加这些“三角形”？
我希望叠加层可点击。我看了一下，看起来解决方案是addListener，但我见过的所有例子都只有一个标记（在这种情况下不是多个），也没有使用GMaps.js的例子。什么是最好的方法来做到这一点？

我的代码如下。非常感谢！

<script> 
// I've included the Gmaps API and gmaps.js here 
jQuery(function($) { 
map = new GMaps({ 
     div: '#map', 
     lat: -23.873209, 
     lng: 201.155845, 
     zoom: 12, 
    }); 

// the Body contains multiple event_location elements which have data-lat and data-lng defined for each event by PHP, which is used below - this part is not a problem 
$('.event_location').each(function() { 
     map.drawOverlay({ 
      lat: $(this).attr('data-lat'), 
      lng: $(this).attr('data-lng'), 
      content: "<div class='map_overlay' style='background-color: blue;'><a href='" + $(this).attr('data-url') + "'>" + $(this).attr('data-subject') + "</a></div>" 
     }); 
    }); 

}); 

</script>

来源

2016-05-21 user6122500

http://stackoverflow.com/questions/24641958/gmap-js-mouseover-event-on-an-overlay-is-it-possible有一个很好的解决方案 – user6122500

＃1，你缺少的这一部分：

<div class='overlay_arrow above'></div>

从the example in the documentation

代码片段：

jQuery(function($) { 
 
    map = new GMaps({ 
 
    div: '#map', 
 
    lat: -23.873209, 
 
    lng: 201.155845, 
 
    zoom: 3, //12, 
 
    }); 
 

 
    // the Body contains multiple event_location elements which have data-lat and data-lng defined for each event by PHP, which is used below - this part is not a problem 
 
    $('.event_location').each(function() { 
 
    map.drawOverlay({ 
 
     lat: $(this).attr('data-lat'), 
 
     lng: $(this).attr('data-lng'), 
 
     content: "<div class='overlay'><a href='" + $(this).attr('data-url') + "'>" + $(this).attr('data-subject') + "</a><div class='overlay_arrow above'></div></div>" 
 
    }); 
 
    }); 
 

 
});

body, 
 
html, 
 
#map { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
body { 
 
    font-family: 'Droid Sans', 'Helvetica', Arial, sans-serif; 
 
    margin: 5px; 
 
} 
 
#body { 
 
    width: 1000px; 
 
} 
 
#instructions { 
 
    margin-top: 10px; 
 
} 
 
#instructions li { 
 
    display: none; 
 
} 
 
.overlay { 
 
    display: block; 
 
    text-align: center; 
 
    color: #fff; 
 
    font-size: 60px; 
 
    line-height: 80px; 
 
    opacity: 0.8; 
 
    background: #4477aa; 
 
    border: solid 3px #336699; 
 
    border-radius: 4px; 
 
    box-shadow: 2px 2px 10px #333; 
 
    text-shadow: 1px 1px 1px #666; 
 
    padding: 0 4px; 
 
} 
 
.overlay_arrow { 
 
    left: 50%; 
 
    margin-left: -16px; 
 
    width: 0; 
 
    height: 0; 
 
    position: absolute; 
 
} 
 
.overlay_arrow.above { 
 
    bottom: -15px; 
 
    border-left: 16px solid transparent; 
 
    border-right: 16px solid transparent; 
 
    border-top: 16px solid #336699; 
 
} 
 
.overlay_arrow.below { 
 
    top: -15px; 
 
    border-left: 16px solid transparent; 
 
    border-right: 16px solid transparent; 
 
    border-bottom: 16px solid #336699; 
 
} 
 
.row { 
 
    font-size: 14px; 
 
} 
 
pre { 
 
    font-family: 'Ubuntu Mono'; 
 
    font-size: 14px; 
 
} 
 
.row { 
 
    zoom: 1; 
 
    margin-left: -20px; 
 
} 
 
.row:before, 
 
.row:after { 
 
    display: table; 
 
    content: ""; 
 
    zoom: 1; 
 
} 
 
.row:after { 
 
    clear: both; 
 
} 
 
.row>[class*="span"] { 
 
    display: inline; 
 
    float: left; 
 
    margin-left: 20px; 
 
} 
 
.span1 { 
 
    width: 40px; 
 
} 
 
.span2 { 
 
    width: 100px; 
 
} 
 
.span3 { 
 
    width: 160px; 
 
} 
 
.span4 { 
 
    width: 220px; 
 
} 
 
.span5 { 
 
    width: 280px; 
 
} 
 
.span6 { 
 
    width: 340px; 
 
} 
 
.span7 { 
 
    width: 400px; 
 
} 
 
.span8 { 
 
    width: 460px; 
 
} 
 
.span9 { 
 
    width: 520px; 
 
} 
 
.span10 { 
 
    width: 580px; 
 
} 
 
.span11 { 
 
    width: 640px; 
 
} 
 
.span12 { 
 
    width: 700px; 
 
} 
 
.span13 { 
 
    width: 760px; 
 
} 
 
.span14 { 
 
    width: 820px; 
 
} 
 
.span15 { 
 
    width: 880px; 
 
} 
 
.span16 { 
 
    width: 940px; 
 
} 
 
.span17 { 
 
    width: 1000px; 
 
} 
 
.span18 { 
 
    width: 1060px; 
 
} 
 
.span19 { 
 
    width: 1120px; 
 
} 
 
.span20 { 
 
    width: 1180px; 
 
} 
 
.span21 { 
 
    width: 1240px; 
 
} 
 
.span22 { 
 
    width: 1300px; 
 
} 
 
.span23 { 
 
    width: 1360px; 
 
} 
 
.span24 { 
 
    width: 1420px; 
 
} 
 
pre.prettyprint { 
 
    background: #fff; 
 
    border-color: #c1c1c1; 
 
    -webkit-border-radius: 2px; 
 
    -moz-border-radius: 2px; 
 
    border-radius: 2px; 
 
    -webkit-box-shadow: 0 0 10px #999; 
 
    -moz-box-shadow: 0 0 10px #999; 
 
    box-shadow: 0 0 10px #999; 
 
    padding: 5px; 
 
    white-space: pre-wrap; 
 
    word-wrap: break-word; 
 
} 
 
.label { 
 
    font-size: 10.998px; 
 
    font-weight: bold; 
 
    line-height: 14px; 
 
    color: #ffffff; 
 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 
 
    white-space: nowrap; 
 
    vertical-align: baseline; 
 
    background-color: #999999; 
 
    margin: 2px 6px; 
 
} 
 
.label { 
 
    padding: 1px 4px 2px; 
 
    -webkit-border-radius: 3px; 
 
    -moz-border-radius: 3px; 
 
    border-radius: 3px; 
 
} 
 
.notice { 
 
    background-color: #3a87ad; 
 
} 
 
form input[type=text] { 
 
    border: solid 1px #999999; 
 
    padding: 2px; 
 
} 
 
.edit_marker { 
 
    width: 250px; 
 
    height: 80px; 
 
} 
 
.edit_marker p { 
 
    margin: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.12/gmaps.min.js"></script> 
 

 
<div id="map"></div> 
 
<div class="event_location" data-lat="-23.873209" data-lng="201.155845" data-subject="something" data-url="http://www.google.com"></div>

来源

2016-05-21 21:35:49 geocodezip

谢谢，是的，回答问题＃1 – user6122500

Gmaps.js - 如何将“指针”添加到叠加层并使其可点击？

回答

相关问题