SVG 做地图具有可以任意比例放大缩小不失真的优点。本例基于d3.js的svg制作。

地图数据用GeoJSON存储。GeoJSON 是基于JSON 的、为Web 应用而编码地理数据的一个标准。实际上,GeoJSON 并不是另一种格式,而只是JSON 非常特定的一种使用方法。

网上有很多免费的GeoJSON下载,本例子中国地图GeoJSon 可以从本例源码 下载

###1.获取d3 在项目中引入即可, <script src="http://d3js.org/d3.v3.min.js"></script>

###2.创建svg var width = 960, height = 500; var svg = d3.select(“body”) .append(“svg”) .attr(“width”, width) .attr(“height”, height); ###3.创建投影(projection) var projection = d3.geo.mercator().translate([width / 2, height / 2]).center([105, 38]).scale(550);

###4.创建path var path = d3.geo.path().projection(projection);

###5. 解析json d3.json(“china.geo.json”, function(json) {

    svg.selectAll("path")
            .data(json.features)
            .enter()
            .append("path")
            .attr("d", path)
            .on('mouseover', function(data) {
                d3.select(this).attr('fill', 'rgba(2,2,139,0.61)');

                //创建显示tooltip用的矩形
                svg.append("rect")
                        .attr("id", "tooltip1")
                        .attr("x", 50)
                        .attr("y",50)
                        .attr("width",140)
                        .attr("height",130)
                        .attr("stroke","black")
                        .attr("fill","none")
                ;

                //创建显示tooltip文本
                svg.append("text")
                        .attr("id", "tooltip2")
                        .attr("x", 100)
                        .attr("y", 100)
                        .attr("text-anchor", "middle")
                        .attr("font-family", "sans-serif")
                        .attr("font-size", "11px")
                        .attr("font-weight", "bold")
                        .attr("fill", "black")
                        .text(data.properties.name);
            })
            .on('mouseout', function(data) {
                d3.select(this).attr('fill', 'rgba(128,124,139,0.61)');
                //Remove the tooltip
                d3.select("#tooltip1").remove();
                d3.select("#tooltip2").remove();
            })
            .attr('fill', 'rgba(128,124,139,0.61)')
            .attr('stroke', 'rgba(255,255,255,1)')
            .attr('stroke-width', 1)
    ;
});

演示效果:

完整源码下载

中国地图GeoJSON

查看例子