jquery网络营销地图鼠标点击城市弹窗显示详细地址信息，点击相应的城市弹窗显示对应内容。css js 结构清晰，下载即可使用，
使用方法：
1、head引入css文件
<link href="css/style.css" rel="stylesheet" type="text/css"/>
2、head引入js文件
<script type="text/javascript" src="js/jquery.min.js"></script>
3、body引入HTML代码
<div class="map-content map-branch">
<div class="map-module">
<p class="map-title">就近找到我们</p>
<div class="map-content-info">
<div class="branch-map-l">
<div class="map-content-box">
<span class="map-dot beijing" data-id="beijing" value="北京">北京</span>
<span class="map-dot tianjin" data-id="tianjin" value="天津">天津</span>
<span class="map-dot hebei" data-id="hebei" value="河北">河北</span>
<span class="map-dot shanxi" data-id="shanxi" value="山西">山西</span>
<span class="map-dot liaoning" data-id="liaoning" value="辽宁">辽宁</span>
<span class="map-dot jilin" data-id="jilin" value="吉林">吉林</span>
<span class="map-dot heilongjiang" data-id="heilongjiang" value="黑龙江">黑龙江</span>
<span class="map-dot shanghai cur" data-id="shanghai" value="上海">上海</span>
<span class="map-dot jiangsu" data-id="jiangsu" value="江苏">江苏</span>
<span class="map-dot zhejiang" data-id="zhejiang" value="浙江">浙江</span>
<span class="map-dot anhui" data-id="anhui" value="安徽">安徽</span>
<span class="map-dot fujian" data-id="fujian" value="福建">福建</span>
<span class="map-dot jiangxi" data-id="jiangxi" value="江西">江西</span>
<span class="map-dot shandong" data-id="shandong" value="山东">山东</span>
<span class="map-dot henan" data-id="henan" value="河南">河南</span>
<span class="map-dot hubei" data-id="hubei" value="湖北">湖北</span>
<span class="map-dot hunan" data-id="hunan" value="湖南">湖南</span>
<span class="map-dot guangdong" data-id="guangdong" value="广东">广东</span>
<span class="map-dot guangxi" data-id="guangxi" value="广西">广西</span>
<span class="map-dot chongqing" data-id="chongqing" value="重庆">重庆</span>
<span class="map-dot sichuan" data-id="sichuan" value="四川">四川</span>
<span class="map-dot guizhou" data-id="guizhou" value="贵州">贵州</span>
<span class="map-dot yunnan" data-id="yunnan" value="云南">云南</span>
<span class="map-dot shanxi1" data-id="shanxi1" value="陕西">陕西</span>
</div>
<div class="branch-map-data" id="company_liaoning">
<div class="branch-map-data-title">
<p>辽宁</p>
</div>
<div class="branch-map-data-info">
<div class="data-branch">
<a href="#" target="_blank" title=""><p class="data-name">大连分公司</p></a>
<p>地址： 大连市合众分公司</p>
<p>总机：0411-90xxxx88</p>
<p>传真：0411-09xxxx88</p>
<p>网址： <a href="#" target="_blank">www.a-ui.cn</a></p>
</div>
<div class="data-branch">
<a href="#" target="_blank" title=""><p class="data-name">沈阳分公司</p></a>
<p>地址： 沈阳市国营大道310号民营路旗舰大厦</p>
<p>总机：024-78787878</p>
<p>传真：024-87878787</p>
<p>网址： <a href="#" target="_blank">www.17sucai.com</a></p>
</div>
<div class="data-branch">
<a href="#" target="_blank" title="辽宁网站建设">
<p class="data-name">锦州分公司</p>
</a>
<p>地址： 锦州市中央大街二段25号C座问鼎大厦6楼锦州分公司</p>
<p>总机：0416-3864222</p>
<p>传真：0416-3882060</p>
<p>
网址： <a href="#" target="_blank">jinzhou.aui.com </a>
</p>
</div>
</div>
</div>
<div class="branch-map-data" id="company_guangdong">
<div class="branch-map-data-title">
<p>广东</p>
</div>
<div class="branch-map-data-info">
<div class="data-branch">
<a href="#" target="_blank" title="广东网站建设">
<p class="data-name">广州分公司</p>
</a>
<p>地址： 广州市越秀区广州大道中289号南方日报</p>
<p>总机：18688864252</p>
<p>传真：020-22387951</p>
<p>
网址： <a href="#" target="_blank">guangzhou.aui.com </a>
</p>
</div>
<div class="data-branch">
<a href="#" target="_blank" title="广东网站建设">
<p class="data-name">深圳分公司</p>
</a>
<p>地址： 深圳市南山区高新技术产业园中</p>
<p>总机：0755-33508008 </p>
<p>传真：0755-33508160</p>
<p>
网址： <a href="#" target="_blank">shenzhen.aui.com </a>
</p>
</div>
<div class="data-branch">
<a href="#" target="_blank" title="广东网站建设">
<p class="data-name">深圳第二分公司</p>
</a>
<p>地址： 深圳市宝安13区宝民一路宝安宝通大厦</p>
<p>总机：075533818028</p>
<p>传真：0755-33818058</p>
<p>
网址： <a href="#" target="_blank">baoan.aui.com </a>
</p>
</div>
<div class="data-branch">
<a href="#" target="_blank" title="广东网站建设">
<p class="data-name">东莞分公司</p>
</a>
<p>地址： 东莞市莞太大道南城路段15号丝绸大厦</p>
<p>总机：0769-23364010</p>
<p>传真：0769-23364003</p>
<p>
网址： <a href="#" target="_blank">dongguan.aui.com </a>
</p>
</div>
<div class="data-branch">
<a href="#" target="_blank" title="广东网站建设">
<p class="data-name">东莞第二分公司</p>
</a>
<p>地址： 东莞市南城区莞太路丝绸大厦3楼</p>
<p>总机：0769-89396708</p>
<p>传真：0769-85021520</p>
<p>
网址： <a href="#" target="_blank">humen.aui.com </a>
</p>
</div>
<div class="data-branch">
<a href="#" target="_blank" title="广东网站建设">
<p class="data-name">佛山分公司</p>
</a>
<p>地址： 佛山市禅城区季华五路55号万科</p>
<p>总机：0757-83657888</p>
<p>传真：0757-83657798</p>
<p>
网址： <a href="#" target="_blank">foshan.aui.com </a>
</p>
</div>
<div class="data-branch">
<a href="#" target="_blank" title="广东网站建设">
<p class="data-name">中山分公司</p>
</a>
<p>地址： 中山市石岐区安栏路2号中恳大厦16层</p>
<p>总机：0760-23886601</p>
<p>传真：0760-23881200</p>
<p>
网址： <a href="#" target="_blank">zhongshan.aui.com </a>
</p>
</div>
<div class="data-branch">
<a href="#n" target="_blank" title="广东网站建设">
<p class="data-name">惠州分公司</p>
</a>
<p>地址： 惠州市麦地路69号达利大厦</p>
<p>总机：0752-2080100</p>
<p>传真：0752-2080202</p>
<p>
网址： <a href="#n" target="_blank">huizhou.aui.com </a>
</p>
</div>
<div class="data-branch">
<a href="#" target="_blank" title="广东网站建设">
<p class="data-name">汕头分公司</p>
</a>
<p>地址： 汕头市金环路时代广场西侧潮汕星河大厦</p>
<p>总机：0754-88483737</p>
<p>传真：0754-88483747</p>
<p>
网址： <a href="#" target="_blank">shantou.aui.com </a>
</p>
</div>
<div class="data-branch">
<a href="#" target="_blank" title="广东网站建设">
<p class="data-name">龙岗分公司</p>
</a>
<p>地址： 深圳市龙岗区龙岗街道龙岗大道号</p>
<p>总机：0755-33839928</p>
<p>传真：0755-33839900</p>
<p>
网址： <a href="#" target="_blank">longgang.aui.com </a>
</p>
</div>
<div class="data-branch">
<a href="#" target="_blank" title="广东网站建设">
<p class="data-name">顺德分公司</p>
</a>
<p>地址： 广东省佛山市顺德区大良街道办事处中区居委会</p>
<p>总机：0757-22313658</p>
<p>传真：0757-22313765</p>
<p>
网址： <a href="#" target="_blank">shunde.aui.com </a>
</p>
</div>
<div class="data-branch">
<a href="#" target="_blank" title="广东网站建设">
<p class="data-name">江门分公司</p>
</a>
<p>地址： 东华一路61号金华商业中心8层825室</p>
<p>总机：13902586188,0750-3293088</p>
<p>传真：0750-3293009</p>
<p>
网址： <a href="#" target="_blank">jiangmen.aui.com </a>
</p>
</div>
<div class="data-branch">
<a href="#" target="_blank" title="广东网站建设">
<p class="data-name">珠海分公司</p>
</a>
<p>地址： 广东省珠海市香洲区明珠南路2158号华业大厦</p>
<p>总机：0756－8580080</p>
<p>传真：0756－8580051</p>
<p>
网址： <a href="#" target="_blank">zhuhai.aui.com </a>
</p>
</div>
</div>
</div>
<div class="branch-map-data" id="company_shandong">
<div class="branch-map-data-title">
<p>山东</p>
</div>
<div class="branch-map-data-info">
<div class="data-branch">
<a href="#" target="_blank" title="山东网站建设">
<p class="data-name">青岛分公司</p>
</a>
<p>地址： 青岛市南京路8号府都大厦14层</p>
<p>总机：0532-85027637</p>
<p>传真：0532-66986374</p>
<p>
网址： <a href="#" target="_blank">qingdao.aui.com </a>
</p>
</div>
<div class="data-branch">
<a href="#" target="_blank" title="山东网站建设">
<p class="data-name">济南分公司</p>
</a>
<p>地址： 济南市泺源大街68号玉泉森信大酒店</p>
<p>总机：0531-55657796</p>
<p>传真：0531-55657297</p>
<p>
网址： <a href="#" target="_blank">jinan.aui.com </a>
</p>
</div>
<div class="data-branch">
<a href="#" target="_blank" title="山东网站建设">
<p class="data-name">烟台分公司</p>
</a>
<p>地址： 山东省烟台市芝罘区南大街213号华天大厦</p>
<p>总机：0535-4080614</p>
<p>传真：0535-6634349</p>
<p>
网址： <a href="#" target="_blank">yantai.aui.com </a>
</p>
</div>
<div class="data-branch">
<a href="#" target="_blank" title="山东网站建设">
<p class="data-name">济南第二分公司</p>
</a>
<p>地址： 济南市顺河街66号 银座晶都国际1号楼6层</p>
<p>总机：0531-81771588</p>
<p>传真：0531-81771515</p>
<p>
网址： <a href="#" target="_blank">jinan2.aui.com </a>
</p>
</div>
<div class="data-branch">
<a href="#" target="_blank" title="山东网站建设">
<p class="data-name">威海分公司</p>
</a>
<p>地址： 威海青岛中路附106号龙海国际</p>
<p>总机：0631-5322326</p>
<p>传真：0631-5272829</p>
<p>
网址： <a href="#" target="_blank">weihai.aui.com </a>
</p>
</div>
<div class="data-branch">
<a href="#" target="_blank" title="山东网站建设">
<p class="data-name">淄博分公司</p>
</a>
<p>地址： 淄博市张店区柳泉路156号</p>
<p>总机：0533-2360088</p>
<p>传真：0533-2360000</p>
<p>
网址： <a href="#" target="_blank">zibo.aui.com </a>
</p>
</div>
<div class="data-branch">
<a href="#" target="_blank" title="山东网站建设">
<p class="data-name">潍坊分公司</p>
</a>
<p>地址： 潍坊市奎文区鸢飞路与福寿街万达广场B座11楼</p>
<p>总机：0536-5076688</p>
<p>传真：0536-5076606</p>
<p>
网址： <a href="#" target="_blank">weifang.aui.com </a>
</p>
</div>
<div class="data-branch">
<a href="#" target="_blank" title="山东网站建设">
<p class="data-name">临沂分公司</p>
</a>
<p>地址： 临沂市兰山区金雀山一路开元上城B座1117室</p>
<p>总机：0539-3217967</p>
<p>传真：0539-3217933</p>
<p>
网址： <a href="#" target="_blank">linyi.aui.com </a>
</p>
</div>
</div>
</div>
<div class="branch-map-data" id="company_yunnan">
<div class="branch-map-data-title">
<p>云南</p>
</div>
<div class="branch-map-data-info">
<div class="data-branch">
<a href="#" target="_blank" title="云南网站建设">
<p class="data-name">昆明分公司</p>
</a>
<p>地址： 昆明市青年路389号志远大厦副楼（志远新天地）5楼E座</p>
<p>总机：0871-66349955</p>
<p>传真：0871-66098579</p>
<p>
网址： <a href="#" target="_blank">kunming.aui.com </a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
if ($(".map-branch")) {
//默认显示上海
$(".map-dot.shanghai").addClass("cur");
$("#company_shanghai").show().css({
"left": $(".map-dot.shanghai").position().left + 36,
"top": $(".map-dot.shanghai").position().top - $("#company_shanghai").height() / 2 + 8
});
$(".map-dot").on("mouseover", function() {
$(this).addClass("cur").siblings(".map-dot").removeClass("cur");
});
$(".map-dot").on("click", function() {
$(this).addClass("cur").siblings(".map-dot").removeClass("cur");
var dataid = $(this).attr("data-id")
, comp = $("#company_" + dataid)
, otherComp = $("#company_" + dataid).siblings(".branch-map-data");
comp.fadeIn("fast").css({
"left": $(this).position().left + 36,
"top": $(this).position().top - comp.height() / 2 + 8
});
otherComp.hide();
});
$(".branch-map-data").on("mouseleave", function() {
$(this).hide();
$(".map-dot").removeClass("cur");
});
}
});
</script>
