<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="jquery地图插件">
    <meta name="keywords" content="jquery,jquery插件,jsmap,jsmap地图">
    <title>jsMap</title>
    <style>
        *{margin:0;padding:0;outline:0}
        html{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,"PingFang SC","Microsoft YaHei",Arial,sans-serif;-webkit-text-size-adjust:100%}
        body{background:#f5f5f5}
        main{display:block}
        ul{list-style:none}
        a{text-decoration:none;color:#2285ee}
        #container{position:relative;overflow:hidden;margin:0 auto;width:1010px;height:auto;background:#fff;box-shadow:#d6d6d6 0 0 15px}
    </style>
</head>
<body>
<div id="container">
    <h1>jsMap 地图插件</h1>
    <div id="map"></div>
</div>
</body>
<script src="/js/map/jquery-1.9.0.min.js"></script>
<script src="/js/map/jsMap-2.0.0.min.js"></script>
<script>
    $(function () {
        jsMap.json( "/js/map/map.json" ).done(function ( response ) {
            //jsMap.config( "#demo-01", response );   基础区块

            jsMap.config( "#map", response, {
                //定义区块的颜色和宽度
                /*stroke: {
                    width: 2,
                    color: "#000"
                }*/

                //disabled: [ "heilongjiang", "jilin", "liaoning" ],  禁用区域

                //定义区块的填充色  悬浮色  点击色
                /*fill: {
                    basicColor: "#259200",
                    hoverColor: "#57cb00",
                    clickColor: "#2e6f18"
                }，*/

                //显示区域文字和点击时的文字颜色
                /*areaName: {
                    show: true,
                    clickColor: "#fff"
                }*/

                //自定义悬浮提示框
                /*tip: function ( id, name ) {
                    return '<div style="background:#fff;padding:20px;"><p>id: ' + id + '</p><p>name: ' + name + '</p></div>';
                },*/

                //自定义指定区域的填充色 / 悬浮色 / 点击色
                fill: {
                    basicColor: {
                        heilongjiang: "#ff5900",
                        jilin: "#19bb00",
                        liaoning: "#6800ff",
                        jiangxi:"#8a3434"
                    },
                    hoverColor: {
                        heilongjiang: "#ff8c4e",
                        jilin: "#1fe000",
                        liaoning: "#954dff"
                    },
                    clickColor: {
                        heilongjiang: "#c94600",
                        jilin: "#159a00",
                        liaoning: "#5200c9"
                    },
                },
                //悬浮回调函数
                /*hoverCallback: function ( id, name ) {
                    console.log( id + " --- " + name );
                    alert( "666 --- 999");
                }*/

                // multiple: true  点击选择多个区域
            });

        })
    })
</script>
</html>

//在线实例  http://jsmap.applinzi.com/

jsMap地图网点的更多相关文章

  1. 乐卡上海网点地图制作心得 | 百度地图API使用心得

    前言 事情的起因是我的爱人喜欢收集一些美丽的乐卡(明信片的一种,正面是美丽壮阔的风景照).作为一个坚实的后盾自然要支持她!于是我经常借着午休穿梭在大街小巷,凭借乐卡官方提供的乐卡网点地址进行寻找并取卡 ...

  2. 使用Excel VBA编程将网点的百度坐标转换后标注到高德地图上

    公司网点表存储的坐标是百度坐标,现需要将网点位置标注到高德地图上,研究了一下高德地图的云图数据模版 http://lbs.amap.com/yuntu/reference/cloudstorage和坐 ...

  3. 基于jquery地图特效全国网点查看代码

    基于jquery地图特效全国网点查看代码.这是一款简单实用的jQuery地图特效,主要知识点是jquery和css实现了中图地图,提示层效果.效果图如下: 在线预览   源码下载 实现的代码. htm ...

  4. Angularjs+node+Mysql实现地图上的多点标注

    注:本文适合对于node有一定基础的人,如果您是小白,请先用1个小时学习node.node文档https://nodejs.org/en/docs/ 该片博文的源码地址:https://github. ...

  5. Echart - 地图散点图(服务网点图)的实现

    Echart是百度开发的一个javascript图表库,可以流程运行于pc和移动端,底层依赖轻量级的 Canvas 类库 ZRender. ECharts 提供了常规的折线图,柱状图,散点图,饼图,K ...

  6. 查找附近网点geohash算法及实现 （Java版本号）

    參考文档: http://blog.csdn.net/wangxiafghj/article/details/9014363geohash  算法原理及实现方式 http://blog.charlee ...

  7. 百度地图API相关点

    百度API接口:http://developer.baidu.com/map/jsdemo.htm#a1_1 百度地图API具体解释之地图标注:http://www.cnblogs.com/jz110 ...

  8. jquery中国地图插件

    插件下载地址: http://www.17sucai.com/preview/1266961/2018-09-18/map/js/jsMap-1.1.0.min.js jsMap 项目介绍 这是一个功 ...

  9. 前端切图:调用百度地图API

    原型图 图片发自简书App <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

随机推荐

  1. css3 混合模式mix-blend-mode background-blend-mode 以及混合模式的隔断 isolation

    css 混合模式 mix-blend-mode: 让 元素内容 和 这个元素 以及 下面的元素 发生混合 background-blend-mode 背景的混合模式 可以是背景图片的混合也可以是背景图 ...

  2. 【179】IDL 读写 NetCDF 文件

    NetCDF(network Common Data Form)由位于科罗拉多州波尔市的 Unidata 程序中心开发,主要应用于大气科学的研究.NetCDF 的数据模式具有简单性和灵活性的特点.Ne ...

  3. Tomcat闪退的解决办法

    1 首先考虑的是端口占用 2 现在讲的是这一种方法 (1)找到解压缩的文件的bin目录 找到startup.bat 记事本打开 开头加上两句话 SET JAVA_HOME=C:\Program Fil ...

  4. Ruby - 创建自己的GEM

    Log 1 创建自己的gem 背景:好奇gem包的用法,首先搞清楚什么是gem包.那我们就先来创建一个自己的gem包. 时间:2014-3-8 环境:Ubuntu + Ruby 1.9.3 记录:Ro ...

  5. （转）ASP.NET 4.0 尚未在 Web 服务器上注册

    安装vs2010的时候忘记先安装IIS7了,导致出现了这个问题.经过网络查询发现解决方法如下: 运行:cmd命令,进入命令管理器, 输入:cd C:\\WINDOWS\\Microsoft.NET\\ ...

  6. Eclipse打开Android项目报Parsing Data for android-21 failed错误的解决办法（转载）

    转载:http://segmentfault.com/blog/hongliang/1190000000739285 今天手贱,用android命令打开SDK Manager下载了最新的Android ...

  7. java翻译lua+c+openssl签名项目

    原来项目中用openresty nginx+lua实现server,lua调用c动态链接库,来使用openss做签名,并生成130字节(128签名+2位自定义字节)长度的文件. nginx: loca ...

  8. HDU1253:胜利大逃亡

    传送门 题意 逃离迷宫 分析 用优先队列和队列都可以,但是我vis数组写在取队列首节点就MLE了,放在放入节点的地方就ac了,看来是一种固定写法,在放入节点的地方判断,可以防止放入无效点到队列,防止队 ...

  9. bzoj 1614: [Usaco2007 Jan]Telephone Lines架设电话线【二分+spfa】

    二分答案,然后把边权大于二分值的的边赋值为1,其他边赋值为0,然后跑spfa最短路看是否满足小于等于k条边在最短路上 #include<iostream> #include<cstd ...

  10. 只需3步，即可将你的Chromium Edge 浏览器设置成中文

    最近,Chromium Edge 浏览器推出了添加语言包的功能,于是我们可以轻松将其界面设置成中文的. 第1步: 升级浏览器到最新版 在Chromium Edge 浏览器的地址栏中输入: edge:/ ...