在百度地圖或谷歌地圖給中國各省著色並高亮顯示

最近有朋友需要在百度地圖中給各省按不同顏色顯示，先上效果圖：

原理就是獲取各省的邊界座標,然後在地圖上面用不顏色的覆蓋物Polygon，百度地圖和谷歌地圖都有同樣的Polygon類。

先講講在百度地圖中如何實現，

1.建立百度地圖

    var map = new BMap.Map("container");
    map.addControl(new BMap.MapTypeControl({
        mapTypes:[BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP]
    }));
    map.addControl( 
new BMap.NavigationControl());
    map.enableScrollWheelZoom();
    map.enableContinuousZoom();

2.獲取各省的邊界座標

首先定義一箇中國各省名稱和顏色的陣列provinces，裡面的顏色是從網上找的一張中國地圖用顏色拾取器獲得的。

    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"
    ];

然後逐個獲取各省的邊界座標並在地圖上用不同顏色描繪出來

function getBoundary(province) {
    var boundary = new BMap.Boundary();
    boundary.get(name, function(rs){ 
     //一個省可能有好幾個閉合的多邊形區域
     for (var i = 0; i < rs.boundaries.length; i++) {
     //.......
     //.......
     }    
    });  
} 
//逐個顯示
for (var i = provinces.length - 1; i >= 0; i--) {
    getBoundary(provinces[i]);
}

3.給polygon新增監聽,現實滑鼠移動到某省上面閃爍高亮顯示

//開始用"mouseover","mouseout"發現,滑鼠移動過快,會多個省份也高亮了.所以改成 click了
polygon.addEventListener("click", function (e) {
    var latlng = e.point;
    var info = new BMap.InfoWindow(name + " " + latlng.lat + "," + latlng.lng, {width:220});
    map.openInfoWindow(info, latlng);

    //高亮閃爍顯示滑鼠點選的省
    delay = 0;
    for (flashTimes = 0; flashTimes < 3; flashTimes++) {
        delay += 200;
        setTimeout(function () {
            polygon.setFillColor("#FFFF00");
        }, delay);

        delay += 200;
        setTimeout(function () {
            polygon.setFillColor(color);
        }, delay);
    }
});

點選某省用黃色高亮顯示，還閃爍幾下。

4.收工了，在谷歌地圖中的實現方法，請聽下回分解。

剛花了幾分鐘在谷歌地圖中實現同樣的效果，是不是很8錯！

程式碼如下:

  1 <html xmlns="http://www.w3.org/1999/xhtml">
  2   
  3   <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5     <title>在谷歌地圖中高亮顯示各省</title>
  6     <style type="text/css">
  7       body {
  8         margin: 0;
  9         border: 0;
 10         overflow: hidden;
 11       }
 12       #map_canvas {
 13         width: 100%;
 14         height: 100%;
 15         position: absolute;
 16       }
 17     </style>
 18     <script type="text/javascript" src="http://ditu.google.cn/maps/api/js?sensor=false&language=zh-CN"></script>
 19     <script type="text/javascript" src="citydata.json"></script>
 20     <script>
 21       var map = null;
 22       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"];
 23 
 24       var polyOptions = {
 25         strokeColor: "#9B868B",
 26         fillColor: "#FF8C69",
 27         fillOpacity: 0.6,
 28         strokeWeight: 1,
 29         zIndex: 1
 30       };
 31 
 32         function initialize() {
 33           var myOptions = {
 34             center: new google.maps.LatLng(32.694866, 105.996094),
 35             zoom: 4,
 36             mapTypeId: google.maps.MapTypeId.ROADMAP,
 37             streetViewControl: false
 38           };
 39           map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 40 
 41           // 普通省
 42           for (var i = 0, n = cityData.provinces.length; i < n; i++) {
 43             showBoundaryEx(cityData.provinces[i].b, getColor(cityData.provinces[i].n));
 44             //市
 45             // for (var j = 0, m = cityData.provinces[i].cities.length; j < m; j++) {
 46             //     showBoundary(cityData.provinces[i].cities[j].b);
 47             // }
 48           }
 49           //直轄市 
 50           for (var i = 0, n = cityData.municipalities.length; i < n; i++) {
 51             showBoundaryEx(cityData.municipalities[i].b, getColor(cityData.municipalities[i].n));
 52           }
 53           //港澳臺
 54           for (var i = 0, n = cityData.other.length; i < n; i++) {
 55             showBoundaryEx(cityData.other[i].b, getColor(cityData.other[i].n));
 56           }
 57         }
 58 
 59         function isFloatNumber(value) {
 60           return (!isNaN(value));
 61         }
 62 
 63         function getColor(name) {
 64           for (var m = provinces.length - 1; m >= 0; m--) {
 65             if (provinces[m].indexOf(name) > -1) {
 66               var arr = provinces[m].split("-");
 67               return arr[1];
 68             }
 69           }
 70         }
 71 
 72         function showBoundaryEx(latLngs, color) {
 73           var paths = [],
 74             latLng = "",
 75             list = latLngs.split(";");
 76           for (i = list.length - 1; i >= 0; i--) {
 77             latLng = list[i].split(",");
 78             var lat = latLng[1],
 79               lng = latLng[0];
 80             if ((isFloatNumber(lat)) && (isFloatNumber(lng))) {
 81               paths.push(new google.maps.LatLng(lat, lng));
 82             }
 83           }
 84 
 85           var polygon = new google.maps.Polygon();
 86           polygon.setOptions(polyOptions);
 87           polygon.setOptions({
 88             fillColor: color
 89           });
 90           polygon.setPaths(paths);
 91           polygon.setMap(map);
 92 
 93           google.maps.event.addListener(polygon, "mousemove",
 94 
 95           function () {
 96             polygon.setOptions({
 97               fillColor: "#FFFF00"
 98             });
 99           });
100 
101           google.maps.event.addListener(polygon, "mouseout",
102 
103           function () {
104             polygon.setOptions({
105               fillColor: color
106             });
107           });
108         }
109 
110       google.maps.event.addDomListener(window, "load", initialize);
111     </
              
           
              
              
            
            相關推薦
			   
            
            
            
 

    

    
    在百度地圖或谷歌地圖給中國各省著色並高亮顯示
      
                

最近有朋友需要在百度地圖中給各省按不同顏色顯示，先上效果圖：



原理就是獲取各省的邊界座標,然後在地圖上面用不顏色的覆蓋物Polygon，百度地圖和谷歌地圖都有同樣的Polygon類。




先講講在百度地圖中如何實現，

1.建立百度地圖


    var ma 

  
 

    

    
    Android app呼叫第三方地圖（百度地圖，高德地圖，谷歌地圖）導航
      
                
因為公司專案需要用到外部導航，找到一些，大兄弟們湊合看...好吧反正也沒人看- -

1.呼叫百度導航
//開啟百度導航
    public void startNavi() {
        //百度地圖,從起點是LatLng ll_location = new La 

  
 

    

    
    新浪雲、阿裏雲、百度雲、谷歌雲、亞馬遜雲
      存在   實現   常用   sof   ava   解決   http   只需要   產品   新浪雲：http://sae.sina.com.cn/

阿裏雲：http://www.aliyun.com/百度雲：http://yun.baidu.com/谷歌雲：https://developers.go 

  
 

    

    
    谷歌地圖下載|谷歌地圖app下載
      在谷歌的實驗室裡，出現了一項新的產品，它就是谷歌及李開復曾兩次公開承諾"很快"就會出現的公交查詢服務，谷歌公交搜尋。這一項集成於谷歌地圖的產品，作為谷歌地圖行車路線的一部分。儘管當前只提供了北京、上海、廣州、南京和杭州的公交線路查詢，但相信谷歌以後會逐步增加新的城市進去。另外，毫無懸念地，谷歌公交搜尋使用的資 

  
 

    

    
    python呼叫百度翻譯、谷歌翻譯
      
							
							
							谷歌翻譯不提供介面，想要使用谷歌的翻譯結果，需要借用爬蟲技術，將待翻譯的文字傳入，抓取頁面，解析出翻譯結果，經測試，這種方法的翻譯效果較差，不建議使用。
百度翻譯提供介面，可在百度翻譯註冊開發者後獲取appid與secretKey直接在python中進行呼叫，這 

  
 

    

    
    javaweb中使用百度、谷歌地圖進行定位
      gets   .get   pos   地圖   click   sea   over   pad   peid   第一種  百度
 
直接上代碼：

 

<!DOCTYPE>
<html>
<head>
<meta name="viewport 

  
 

    

    
    百度與谷歌地圖瓦片組織方式對比
      
                

百度是從中心點經緯度(0,0)度開始計算瓦片，在第1級時百度將世界地圖分為4塊。

中心點右上部分(中國地區)佔1塊。





谷歌是從左上角經緯度(-180,90)度開始計算瓦片，在第1級時谷歌將世界地圖分為1塊。





在第2級時，百度地圖(中心點右上部分)分為 

  
 

    

    
    android跳轉手機百度高德騰訊谷歌地圖、地圖傳座標、座標偏移、base64解碼相關
      
                

調起百度的native app
http://developer.baidu.com/map/uri-introandroid.htm#idmykey47
座標轉換
http://api.map.baidu.com/ag/coord/convert?from=2& 

  
 

    

    
    Android應用內呼叫百度，高德，谷歌地圖導航
      
								
								            
						
                最近專案中有個呼叫百度地圖導航的需求，雖然網上一找一堆，還是覺得自己記錄一下比較方便。1.百度導航//開啟百度導航
public void startNavi() {
    //百度地圖,從起點是La 

  
 

    

    
    如何將谷歌地圖匯出為百度瓦片
      
								
								            
						
                

在國內的商用地圖中，百度和高德地圖是比較用常用併為大家所熟知的，尤其是對於WebGIS開發者來講，百度API和高德API都是比較常用的專案開發選型平臺。但這兩個平臺都具有一個美中不足的缺點，即衛星影 

  
 

    

    
    H5喚醒本地APP（谷歌地圖、百度地圖等相通）傳遞資料
      
							
							
							前一段時間做了一個架設在微信上的打車軟體，司機端是在瀏覽器中開啟，網頁上的導航無法實時定位與語音播報，後因甲方強制要求，必須開啟本地谷歌地圖，並傳入使用者的起點終點，於是翻譯了相關部落格，完美解決，親測可用。
下面說一下相容性問題：
        IOS：sa 

  
 

    

    
    CAD資料分塊，偏移校準，載入到百度地圖、高德地圖、谷歌等地圖上
      前面分享過一篇如何將CAD海量資料顯示在百度地圖上（百度地圖Canvas實現十萬CAD資料秒級載入），但是很多開發者在CAD資料提取時遇到了問題，所以接下來的文章將介紹如何將CAD資料提取。
準備軟體：
1. Global Mapper V20.0
2.AutoCAD（我用的是2019，其他版本也可以） 

  
 

    

    
    谷歌地圖聚合點
      amp   ()   ont   為我   att   unp   scrip   範圍   pat   我們有時候需要觀察地圖 不同地方數據的所在範圍和分布密集情況，熱力圖和聚合點的使用無疑是最好的選擇。
1.首先說說百度地圖，只做國內的地圖可以使用百度地圖的海量點和熱力圖還是蠻好用的。
a.海量點的最大好 

  
 

    

    
    Google Map Api 谷歌地圖接口整理
      服務器   依次   wheel   gets   並且   ast   utf   整理   實例化   一：基本知識：
 1. 使用谷歌地圖 API 的第一步就是要註冊一個 API 密鑰，需要註重一下兩點：
    1.假如使用 API 的頁面還沒有發布，只是在本地調試，可以不用密鑰，隨便用個字符串代替就 

  
 

    

    
    谷歌地圖 API 開發之獲取坐標以及街道詳情
      gpo   窗口   top   ces   site   1.0   char   回調   .sh   自己的項目中有獲取當前點擊的坐標經緯度或者獲取當前街道的信息的需求。估計這個對於新手來說，還是比較麻煩的，因為從官網上找這個也並不是很好找，要找好久的，運氣好的可能會一下子找到。
獻上自己寫的測試案例。 

  
 

    

    
    百度Api完成在線地圖定位顯示
      js
地址：http://lbsyun.baidu.com/jsdemo.htm#c1_3
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/ 

  
 

    

    
    谷歌地圖
      owin   disabled   eve   mar   PE   tree   edi   TP   listener   谷歌地圖的api: https://developers.google.com/maps/documentation/javascript/
init () {  let _this 

  
 

    

    
    根據經緯度根據谷歌地圖接口獲取到當前地址
      component   col   經緯度   ati   Language   pre   googl   _id   .com   /*http://maps.google.com/maps/api/geocode/json?latlng=40.714224,-73.961452&sensor=t 

  
 

    

    
    根據經緯度根據谷歌地圖介面獲取到當前地址
       
 
 
  /*http://maps.google.com/maps/api/geocode/json?latlng=40.714224,-73.961452&sensor=true */ 
 上面的訪問地址國內可能無法訪問，國內可以訪問以下地址 
  
 String url = "http: 

  
 

    

    
    谷歌地圖goole----指向連結網址
       
 
 <!DOCTYPE html> <html> 
 <head>     <title>Get started with MapView - Create a 2D map</title> </head>>