BingMaps

首先要去官网申请一个密钥，先择相应的API 这里是AJAX V7
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html >
  3    <head>
  4       <title>BingMap</title>
  5       <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
  6       <script type="text/javascript"  charset= 'gb2312' src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=ruru,ngt"></script>
  7             <script type="text/javascript" src="citydata.json"></script>  
  8             
  9       <script charset='gb2312' language="javascript"  type="text/javascript">
 10 
 11       var map = null;
 12          
 13   var provinces = ["广西-#C8C1E3", "广东-#FBC5DC", "湖南-#DBEDC7", "贵州-#E7CCAF", "云南-#DBEDC7", "福建-#FEFCBF", "江西-#E7CCAF", "浙江-#C8C1E3", "安徽-#FBC5DC", "湖北-#C8C1E3", "河南-#DBECC8", "江苏-#DBECC8", "四川-#FCFBBB", "海南省-#FCFBBB", "山东-#FCFBBB", "辽宁-#FCFBBB", "新疆-#FCFBBB", "西藏-#E7CCAF", "陕西-#E7CCAF", "河北-#E7CCAF", "黑龙江-#E7CCAF", "宁夏-#FBC5DC", "内蒙古自治区-#DBEDC7", "青海-#DBEDC7", "甘肃-#C8C1E3", "山西-#FBC5DC", "吉林省-#C8C1E3", "北京-#FBC5DC", "天津-#C8C1E3", "三河市-#E7CCAF", "上海-#FCFBBB", "重庆市-#FBC5DC", "香港-#C8C1E3", "台湾-#C8C1E3"];
 14   
 15     var options= {
 16      fillColor: new Microsoft.Maps.Color(17,Math.round(255*Math.random()),Math.round(255*Math.random()),Math.round(255*Math.random())), 
 17         strokeColor: new Microsoft.Maps.Color(Math.round(255*Math.random()),Math.round(255*Math.random()),Math.round(255*Math.random()),Math.round(255*Math.random())), strokeThickness: parseInt(0),
 18            Opacity: 0
 19         }; 
 20 
 21  function getMap()       
 22     {
 23       
 24       
 25              map = new Microsoft.Maps.Map(document.getElementById('myMap'), 
 26             { 
 27                    credentials: 'AkYtRVRhIZqdIH6iPexPQZr8JZM4fr3ZheaqTqUhZ0Ll2YEDjOQL9KI_uD9l_wYD', 
 28                        width: 1000, height: 600,
 29                      zoom:4, mapTypeId: Microsoft.Maps.MapTypeId.road,
 30                      streetViewControl: false,
 31                     center: new Microsoft.Maps.Location(39.9122636687,116.3843372666),
 32                    showMapTypeSelector:false,
 33                     showBreadcrumb: true
 34                 
 35             });//map
 36             setTileLayerOptions();//创建中国图层
 37 
 38              shouProfile();//加载轮廓
 39             
 40                 addPushpinWithOptions();//构造图钉
 41 
 42  }//getMap()  
 43      
 44 
 45 
 46      function  shouProfile()//加载轮廓
 47      {
 48 
 49     // 普通省
 50           for (var i = 0, n = cityData.provinces.length; i <n; i++) {
 51             showBoundaryEx(cityData.provinces[i].b);
 52             }
 53             //直辖市 
 54           for (var i = 0, n = cityData.municipalities.length; i < n; i++) {
 55       showBoundaryEx(cityData.municipalities[i].b);
 56      }
 57             //港澳台
 58         for (var i = 0, n = cityData.other.length; i < n; i++) {
 59              showBoundaryEx(cityData.other[i].b);
 60          }
 61 
 62      }
 63     
 64   function showBoundaryEx(latLngs)
 65  {
 66              var paths = [],
 67               latLng = "",
 68               list = latLngs.split(";");
 69                 for (i = list.length - 1; i >= 0; i--)
 70                 {
 71                   latLng = list[i].split(",");
 72                   var lat = latLng[1],
 73                    lng = latLng[0];
 74                       if ((isFloatNumber(lat)) && (isFloatNumber(lng)))
 75                       {
 76                         paths.push(new Microsoft.Maps.Location(lat, lng));
 77                       }
 78                 }//for循环
 79 
 80 
 81            //fillColor 不能是16进制数值 不然透明度就被忽落了 参考文档使用Microsoft.Maps.Color()
 82           var r=Math.round(255*Math.random()); //颜色RGB  
 83            var g=Math.round(255*Math.random());
 84             var b=Math.round(255*Math.random());
 85 
 86      
 87 
 88         var polygon = new Microsoft.Maps.Polygon(paths,options);//多变形
 89           polygon.setOptions({ 
 90               //fillColor: new Microsoft.Maps.Color(17,Math.round(255*Math.random()),Math.round(255*Math.random()),Math.round(255*Math.random()))   });
 91               fillColor: new Microsoft.Maps.Color(17,r,g,b)   });
 92 
 93               //添加事件
 94         Microsoft.Maps.Events.addHandler(polygon, 'mouseout', function () {
 95                  polygon.setOptions  ({visible: true,
 96                 fillColor:  new Microsoft.Maps.Color(17,r,g,b)    });  
 97             });   
 98          Microsoft.Maps.Events.addHandler(polygon, 'mouseover', function () {
 99             polygon.setOptions  ({visible: true,
100                 fillColor:  new Microsoft.Maps.Color(100,242,236,18)     });  
101              });    
102          //绑定事件
103    
104    map.entities.push(polygon);
105 
106 }//showBoundaryEx
107 
108 
109 function isFloatNumber(value) {
110             return (!isNaN(value));
111           }
112 
113 
114 
115 
116 
117 
118 
119 
120   
121 function setTileLayerOptions()//创建中国图层
122       {
123         map.entities.clear(); 
124         var options = {uriConstructor: 'http://r2.tiles.ditu.live.com/tiles/r{quadkey}.png?g=41'}; // 指向中文必应地图的Tile系统
125 
126         var tileSource = new Microsoft.Maps.TileSource(options); 
127         var tilelayer= new Microsoft.Maps.TileLayer({ mercator: tileSource}); 
128         map.entities.push(tilelayer); 
129         //alert('Setting Tile layer options'); 
130         map.setView({mapTypeId: 'm'}); 
131        tilelayer.setOptions({opacity:7, zIndex: 1}); 
132        // alert('Opacity 透明度& zIndex set for tilelayer');
133       }
134   
135 
136        function addPushpinWithOptions()//图钉
137       {
138         
139           var offset = new Microsoft.Maps.Point(0, 5); 
140            var pushpinOptions = {text : '1', visible: true, textOffset: offset}; 
141            var pushpin= new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(39.9122636687,116.3843372666), pushpinOptions);   
142           click=Microsoft.Maps.Events.addHandler(pushpin, 'click',pushp_click); //添加事件
143             map.entities.push(pushpin); 
144 
145            var pushpinOptions = {text : '2', visible: true, textOffset: offset}; 
146            var pushpin2= new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(39.948795,116.712998), pushpinOptions);   
147           click2=Microsoft.Maps.Events.addHandler(pushpin2, 'click',pushp_click); //添加事件
148             map.entities.push(pushpin2); 
149     
150       }
151        pushp_click = function (e) //单击事件
152       {
153           if (e.targetType == "pushpin") 
154           {
155                 // var pix = e.target.getLocation() 获取坐标点
156                  showInfobox(e.target)
157           }
158       }
159   function showInfobox(shape)//信息框
160       {
161           
162           map.entities.clear();
163           setTileLayerOptions();
164             shouProfile();
165           addPushpinWithOptions()
166            var infoboxOptions = {width :200, height :100,  zIndex: 0, 
167            //offset:new Microsoft.Maps.Point(10,0), 
168            showPointer: true, 
169            title:'信息提示',
170          description:'提示哈哈地方阿斯'}; 
171         // var defaultInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(39.9122636687,116.3843372666), infoboxOptions );    
172        var defaultInfobox = new Microsoft.Maps.Infobox(shape.getLocation(), infoboxOptions );    
173          map.entities.push(defaultInfobox);
174       }
175 
176       </script>
177    </head>
178    <body onload="getMap();">
179       <div id='myMap' style="position:relative; width:100%; height:100%;">
180      
181        <div>
182         
183       </div>
184    </body>
185 </html>
bingMaps
疯癫石头

BingMaps

公告
