先拿出一张纸。
再画中国轮廓，比如说这张。
请点击输入图片描述
再画出省份，如果还要画省会的话，建议画大些。
请点击输入图片描述
一张完好的中国地图就出来了，如下图。
请点击输入图片描述
END
注意事项
甘肃不要画于过宽，会影响宁夏、陕西、山西、河北、北京、天津。
不要画于过低，影响海南面积。
1.首先导入各种js包：<script type="text/javascript" src="../js/chinamapPath.js"></script>
<script type="text/javascript" src="../js/raphael.js"></script>
<script type="text/javascript" src="../js/g.raphael-min.js"></script>
<script type="text/javascript" src="../js/g.pie-min.js"></script>
<script type="text/javascript" src="../js/g.bar-min.js"></script>
2. 添加页面部分代码
<div id="china_map" style="margin-left:200pxmargin-top:40px"></div>
3. 绘制地图部分代码：
$(function() {
Raphael.getColor.reset()//色谱重置回红色
//创建一个画布对象用来绘制。你必须第一步就这么做，该实例将来调用的所有绘图方法都被绑定到这个画布。
var R = Raphael("china_map", 600, 500)
//调用绘制地图方法
paintMap(R)
var current = null
//用于对鼠标点击次数的计数；
var result = 0
//判断两次点击的区域名字的标志量；
var nameFlag = ""
var x=0
var y=0
var textAttr = {
"fill": "#000",
"font-size": "13px",
"cursor": "pointer" //光标的CSS类型,指针类型；
}
for (var state in china) {//state代表每个省，即就是用每个或区域来遍历整个地图区域；
//Raphael.getColor(0.9):每次调用返回色谱中的下一个颜色(返回颜色的十六进制表示)
china[state]['path'].color = Raphael.getColor(0.9)//分省区域着色
china[state]['path'].transform("t30,0")//地图的每个省的路径横向平移坐标（30px,0px）
(function (st, state) {
//获取每个区域的中心坐标（getBBox()：返回指定元素的边界框，x：左上角Xy表示左上角y）
var xx = st.getBBox().x + (st.getBBox().width / 2)
var yy = st.getBBox().y + (st.getBBox().height / 2)
//***修改部分地图文字偏移坐标
switch (china[state]['name']) {
case "江苏":
xx += 5
yy -= 10
break
case "河北":
xx -= 10
yy += 20
break
case "天津":
xx += 10
yy += 10
break
case "上海":
xx += 10
break
case "广东":
yy -= 10
break
case "澳门":
yy += 10
break
case "香港":
xx += 20
yy += 5
break
case "甘肃":
xx -= 40
yy -= 30
break
case "陕西":
xx += 5
yy += 10
break
case "内蒙古":
xx -= 15
yy += 65
break
default:
}
//***写入地名,并加点击事件,部分区域太小，增加对文字的点击事件
//R.text(xx, yy, china[state]['name'])给地图区域的中心位置添加省的名字
china[state]['text'] = R.text(xx, yy, china[state]['name']).attr(textAttr).click(function () {
if(result<1){ //第一次点击这个区域
nameFlag = china[state]['name']
clickMap()
controlChinaMap()
result += 1
}else if(result>=1 &&(nameFlag == china[state]['name'])){//第N此点击，判断是不是同一个点击区域
clickMap()
}else{
clickMap()
controlChinaMap()
china[state]['text'] = R.text(xx, yy, nameFlag).attr(textAttr).click(function (){
clickMap()
})
}
})
//图形的点击事件(st[0]表示一个SVGPathElement对象)
$(st[0]).click(function (e) {
if(result<1){ //第一次点击这个区域
x = xx
y = yy
nameFlag = china[state]['name']
clickMap()
controlChinaMap()
result += 1
}else if(result>=1 &&(nameFlag == china[state]['name'])){//第N此点击，判断是不是同一个点击区域
clickMap()
}else{
clickMap()
R.barchart(x,y-150,50,200,[0],{type:"round"})
controlChinaMap()
}
})
st[0].onmouseover = function () {
st.animate({fill: st.color, stroke: "#eee"}, 500)//为地图区域创建动画，鼠标滑过区域颜色加深，持续时间500毫秒
china[state]['text'].toFront()//元素上移
R.safari()//处理渲染错误
}
st[0].onmouseout = function () {
st.animate({fill: "#97d6f5", stroke: "#eee"}, 500)
china[state]['text'].toFront()
R.safari()
}
function clickMap() {
if (current == state) //判断两次点击是否点击的是同一个区域
return
//重置上次点击的图形
current &&china[current]['path'].animate({ transform: "t30,0", fill: china[current]['isClick'] ? china[current]['path'].color : "#b0d0ec", stroke: "#ddd" }, 2000, "elastic")
current = state //将当前值赋给变量
//对本次点击
china[state]['path'].animate({ transform: "t30,0 s1.03 1.03", fill: china[state]['path'].color, stroke: "#000" }, 1200, "elastic")
st.toFront() //向上
R.safari()
china[current]['text'].toFront() //***向上
if (china[current] === undefined) return
}
function controlChinaMap(){
//type默认是square，还有sharp、soft
R.barchart(xx,yy-150,50,200,[5,4,3,2,1],{type:"round"})
//在你的图上面加一个注释
//R.blob(xx,yy-130, "25%", 50)
}
})(china[state]['path'], state)
}
})
lol,楼上仗剑折花的方法太幽默了，他那个完全是在模仿一种效果，如果是需要模仿就够了的话还不如直接做成几张图片切换，还可以做的更加美观，我觉得楼主是希望获得能判断经纬度的动态效果，不过如果要自己重头创建的话几乎不可能.不仅要用到web技术还需要gis技术以及具有空间地理坐标的地理数据，每一项都不是几个人能在短期完成的工程，另一点楼主要实现实现显示有意义的动态区域框的功能，如果是bs模式的话需要使用支持画图功能的语言，而这类语言当前浏览器支持均非常有限，替代方法是使用java applet，即编写java，直观的概念，google map即包含楼主所要的经纬度的坐标数据，因为有这些数据所以你才能在google map上实现精确定位，画图功能google map也没有实现，你可以找一些web gis的一些更加高级的应用网站应该有这项功能，所以，google map解决这个问题也不是一天两天一个人两个人能做好的，要不就不会成为google的产品了。
解决办法，
你可以基于google提供的google map提供的api来创建你的应用，这样经纬度，地图数据以及主要的技术问题都由google map提供，你只需基于它创建自己的应用即可，但要知道如何使用google api也不是轻松的事。网上有很多关于google api学习的文章和著作，可先学习一下
