- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
- <style type="text/CSS">
- body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
- </style>
- <script type="text/javascript" src1="jquery-1.8.3.min.js"></script>
- <script type="text/javascript" src1="http://api.map.baidu.com/api?v=1.0&ak=您的密钥"></script>
- <title>拖拽地图</title>
- </head>
- <body>
- <div style="width:780px; height:550px;margin:0 auto; overflow: hidden; position: relative; background-color: #ccc">
- <div id="allmap"></div>
- </div>
- </body>
- </html>
- <script type="text/javascript">
- // 百度地图API功能
- $(function(){
- var map = new BMap.Map('allmap');
- var point = new BMap.Point(105.591334,30.538084);
- map.centerAndZoom(point,13);
- map.enableScrollWheelZoom(true);
- map.enableDragging();
- var data_infon = [
- [105.60068,30.507482],
- [105.56738,30.547487],
- [105.576523,30.531523],
- [105.616707,30.523279],
- [105.61777,30.527915]
- ];
- var icon = new BMap.Icon("blueImg.png", new BMap.Size(61, 40));
- for( var i = 0;i<data_infon.length;i++){
- var marker = new BMap.Marker(new BMap.Point(data_infon[i][0],data_infon[i][1]),{
- icon: icon
- });
- map.addOverlay(marker);
- }
- makerClick();
- function makerClick(){
- var z_index=$(this).css("z-index");
- $(".BMap_Marker").each(function(){
- if($(this).css("z-index")==z_index){
- if(!$(this).hasClass("BMap_noprint")){
- if(img){$(img).attr("src","images/blueImg.png")}
- $(this).find("img").attr("src","images/redImg.png");
- img=$(this).find("img")[0];
- }
- }
- });
- }
- })
- </script>
- //该片段来自于http://www.codesnippet.cn/detail/1203201511868.html
来源: http://www.codesnippet.cn/detail/1203201511868.html