先放一张最后的效果图
主要功能：只显示天府新区（双流区+龙泉驿区）这一块，其他的地方就用半透明的遮罩层盖住，然后用Markers标注出每个项目的所在地点，当鼠标悬浮在标注点的时候就显示出项目名称。
html代码：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> 6 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 7 <title>百度地图api简单使用</title> 8 <style type="text/css"> 9 body, 10 html { 11 width: 100%; 12 height: 100%; 13 margin: 0; 14 font-family: "微软雅黑"; 15 } 16 17 #l-map { 18 height: 600px; 19 width: 100%; 20 } 21 22 #r-result { 23 width: 100%; 24 font-size: 14px; 25 line-height: 20px; 26 } 27 </style> 28 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你自己申请的百度开发者ak"></script> 29 <!--限定显示区域api库--> 30 <script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script> 31 <!--引入自己的js文件--> 32 <script type="text/javascript" src="myMap.js"></script> 33 </head> 34 <body> 35 <!--地图容器--> 36 <div id="myMap"></div> 37 </body> 38 </html>