JVectorMap 标记图

2014年10月1日 raid 前端开发

标记是地图展示功能的一个基本需求，不过目前 JVectorMap 同一时刻只支持一种，使用方式：

增加数据或者引入数据文件；
在配置中赋值；

数据格式

标记数据格式为数组，元素为对象，包含纬经度和名称。

var markersData = [

{

"latLng":[31.070561,119.686315],

"name":"槐坎乡"

},

{

"latLng":[31.073384,119.559557],

"name":"新杭镇"

},

...

]

配置

配置中可以指定标记数据和样式，markerStyle表示标记样式，包含四种状态：初始化，悬浮状态，选中状态，选中悬浮时，可根据需求配置。

$('#world-map').vectorMap({

map: 'js_mill_cn',

markerStyle: {

initial: {

},

hover: {

},

selected: {

},

selectedHover: {

}

},

markers: markersData

});

示例完整代码

<!DOCTYPE html>

<html>

<head>

<title>jmap-plus example</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<meta name="viewport" content="width=device-width,initial-scale=1"/>

<link rel="stylesheet" media="screen" href="../dist/assets/css/jquery-jmapplus.min.css" type="text/css"/>

<script src="../bower_components/jquery/dist/jquery.min.js"></script>

<script src="../bower_components/jquery-mousewheel/jquery.mousewheel.min.js"></script>

<script src="../dist/assets/js/jquery-jmapplus.min.js"></script>

<script src="../dist/assets/data/china/jquery-jmapplus-region-js-mill-cn.js"></script>

<script src="../dist/assets/data/china/jquery-jmapplus-marker-js-mill-cn.js"></script>

</head>

<body style="margin:auto">

<div id="world-map" style="width: 100%; height: 400px"></div>

<script>

$(function () {

$('#world-map').height($(window).height());

$('#world-map').vectorMap({

map: 'js_mill_cn',

markerStyle: {

initial: {

fill: '#F8E23B',

stroke: '#383f47',

r: 3

}

},

markers: markersData

});

</script>

</body>

</html>

演示

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。