Google Map API 的基礎使用

因爲公司業務由國內市場到國際市場，有一些國際性業務的項目需要用到Google Map。項目完成後，把一些常用的方法寫出來，供大家參考。

一、google地圖基礎顯示

（1）引用google map js資源

<!--國內可用-->
<script type="text/javascript" src="http://ditu.google.cn/maps/api/js?key=*****"></script>
<!--國外可用-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=*****"></script>

tips：要正常使用google map 的各項功能，需要用google賬號申請一個API key，反正我當時申請key時花費了不少時間，申請google郵箱賬號時PC端不行，在移動端申請申請時又提示手機號碼無效，各種坑。

（2）在html文件中定義一個盒子

<div id="googleMap"></div>

tips：如果要全屏展示地圖，需要設置改盒子寬高都爲100%。

（3）初始化地圖

    // 地圖中心座標
    var myCenter = {
        lat: '30.65735',
        lng: '104.0658'
    };
    var myLatLng = new google.maps.LatLng(myCenter.lat, myCenter.lng);
    var myOptions = {
        zoom: 15,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map=new google.maps.Map(document.getElementById("googleMap"), myOptions);

效果如下圖（左一）

 

 

二、自定義信息窗口、自定義圖標以及自定義控件

// 自定義Marker標記點
var marker = new google.maps.Marker({
     position:  myLatLng,
     icon: '../car.png',  // 如果爲空則顯示默認的圖標
     map: map
});

// 自定義InfoWindow信息窗口
htmlWindow = "<div class='wrapBox'>\
                   <div>IMEI: " + imei + "</div>\
                   <div>Address：<span id='map-address'>" + pointToAddress(myCenter.lat, myCenter.lng) + "</span>" + info + "</div>\
                   <div>Speed：" + speed + " km/h</div>\
                   <div>Time：" + toDate(2018-12-17 16:12:50) + "</div>\
               </div>";

var infowindow= new google.maps.InfoWindow({
     content: htmlWindow,
     disableAutoPan:true //設置爲true時可禁用自動平移功能
});

//打開信息窗體
infowindow.open(map, marker);

//marker點事件，點擊關閉信息窗體
marker.addListener('click', function() {
    infowindow.close();
});

//監聽X關閉按鈕事件
google.maps.event.addListener(infowindow,"closeclick", function(){
    infowindow.close();
});

自定義標記和自定義信息窗口比較簡單，效果如上圖（中）。如果我們要改變地圖默認的控件位置或需要自定義控件怎麼辦？接着往下看。

googl map默認開啓的控件有：

mapTypeControl   // 地圖類型控件
zoomControl   //地圖縮小放大控件
streetViewControl   //小黃人街景控件
fullscreenControl   //全屏控件

默認沒有開啓的還有panControl、scaleControl、overviewMapControl、rotateControl:true等

// 關閉地圖類型控件，打開縮小放大控件並設置其位置爲坐下方
var myOptions2 = {
    zoom: 15,
    center: myLatLng,
    mapTypeControl: false,
    zoomControl: true,
    zoomControlOptions: {
        style:google.maps.ZoomControlStyle.SMALL,
        position:google.maps.ControlPosition.LEFT_BOTTOM
    }
};

其中，所有控件都有position屬性，代表控件的位置，包括的選項有：OTTOM、BOTTOM_CENTER、BOTTOM_LEFT、BOTTOM_RIGHT、CENTER、LEFT、LEFT_BOTTOM、LEFT_CENTER、LEFT_TOP、RIGHT、RIGHT_BOTTOM、RIGHT_CENTER、RIGHT_TOP、TOP、TOP_CENTER、TOP_LEFT、TOP_RIGHT。記不住沒有關係，你不妨console.log(google.maps.ControlPosition)試試。

而只有部分控件有style屬性，而且各不相同。

// 自定義控件樣式
function HomeControl(controlDiv, map) {
    controlDiv.style.padding = '5px';
    var controlUI = document.createElement('div');
    controlUI.style.backgroundColor = '#ffffff';
    controlUI.style.border='1px solid #cccccc';
    controlUI.style.cursor = 'pointer';
    controlUI.style.textAlign = 'center';
    controlUI.title = 'my title';
    controlDiv.appendChild(controlUI);
    var controlText = document.createElement('div');
    controlText.style.fontFamily='Arial,sans-serif';
    controlText.style.fontSize='14px';
    controlText.style.height = '50px';
    controlText.style.width = '50px';
    controlText.innerHTML = '<b><span>105</span><label>km/h</label><b>';
    controlUI.appendChild(controlText);

    // 自定義控件的點擊事件:
    google.maps.event.addDomListener(controlUI, 'click', function() {
        alert('111');
    });
}

// 自定義控件
function myControl() {
    var homeControlDiv = document.createElement('div');
    var homeControl = new HomeControl(homeControlDiv, map);
    homeControlDiv.index = 1;
    map.controls[google.maps.ControlPosition.LEFT_TOP].push(homeControlDiv);
}

google.maps.event.addDomListener(window, 'load', myControl);

默認空間的位置調整和自定義控件完成，效果如上圖（右一）。

 

三、地址解析

// 地址解析方法
function pointToAddress(lat, lng, backcall) {
    // 實例化Geocoder服務用於解析地址
    var geocoder = new google.maps.Geocoder();
    // 地理反解析過程
    // 請求數據GeocoderRequest爲location,值類型爲LatLng因此我們要實例化經緯度
    geocoder.geocode({ location: new google.maps.LatLng(lat, lng) }, function geoResults(results, status) {
       if (status == google.maps.GeocoderStatus.OK) {
             backcall(results[0].formatted_address);
        } else {
             console.log("：error " + status);
        }
    });
}

// 在需要解析的地方調用方法
pointToAddress(myCenter.lat, myCenter.lng, function (address) {
    // 獲得地址
    console.log(address);
});

我們看到地圖上控件名稱顯示的是中文，如果用戶手機系統是英文，地圖也會自動切換爲英文。暫時更新到這裏，關於google map實現軌跡回放請前往博主的另外一篇文章。