[英]How to add Marker in jVectorMap?
我是jVectorMap的新手。 我已經從鏈接獲得了谷歌地圖: http : //codepen.io/anon/pen/RPjJYb 。 我正在嘗試為此地圖添加標記。 我嘗試了以下代碼,但無法在地圖中添加標記:
$('#vmap').vectorMap({
map: 'usa_en',
backgroundColor: null,
color: '#D2D3D4', //#F58025
hoverColor: '#754200',
selectedColor: '#F58025',
borderColor: '#FFFFFF',
enableZoom: false,
showTooltip: false,
regionsSelectable: true,
markersSelectable: true,
markerStyle: {
initial: {
fill: 'grey',
stroke: '#505050',
"fill-opacity": 1,
"stroke-width": 1,
"stroke-opacity": 1,
r: 5
},
hover: {
stroke: 'black',
"stroke-width": 2
},
selected: {
fill: 'blue'
},
selectedHover: {
}
},
markers: [
{latLng: [41.8781136,-87.6297982], name: "My marker name",style: {fill: 'yellow'}},
],
onRegionClick: function(element, code)
{
alert(code);
}
});
請幫我。 提前致謝。
您沒有使用jVectormap
,而是使用jqvmap
。 我不認為它實現了標記。
您可以切換到jVectorMap,它有點不同,但它有以下標記: http : //jvectormap.com/examples/markers-world/
正如@Irvin Dominin
所說, jqvmap
沒有實現標記,所以嘗試使用jVectormap
它們很相似。
$(document).ready(function(){ $('#vmap').vectorMap({ map: 'us_aea_en', backgroundColor: '#00ff11', color: '#D2D3D4', //#F58025 hoverColor: '#754200', selectedColor: '#F58025', borderColor: '#FFFFFF', enableZoom: false, showTooltip: false, regionsSelectable: true, markersSelectable: true, hoverOpacity: 0.7, markersSelectable: true, markerStyle: { initial: { fill: 'grey', stroke: '#505050', "fill-opacity": 1, "stroke-width": 1, "stroke-opacity": 1, r: 5 }, hover: { stroke: 'black', "stroke-width": 2 }, selected: { fill: 'blue' }, selectedHover: { } }, markers: [ {latLng: [41.8781136,-87.6297982], name: "My marker name",style: {fill: 'yellow'}}, ], onRegionClick: function(element, code) { alert(code); } }); });
.jvectormap-label { position: absolute; display: none; border: solid 1px #CDCDCD; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: #292929; color: white; font-family: sans-serif, Verdana; font-size: smaller; padding: 3px; } .jvectormap-zoomin, .jvectormap-zoomout { position: absolute; left: 10px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: #292929; padding: 3px; color: white; width: 10px; height: 10px; cursor: pointer; line-height: 10px; text-align: center; } .jvectormap-zoomin { top: 10px; } .jvectormap-zoomout { top: 30px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://demo.omnigon.com/christian_bovine/showtime/js/jquery-jvectormap-1.1.1.min.js"></script> <script src="http://demo.omnigon.com/christian_bovine/showtime/js/jquery.jvectormap-us.js"></script> <div id="vmap" style="width: 600px; height: 600px;"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.