因為公司業(yè)務(wù)由國內(nèi)市場到國際市場，有一些國際性業(yè)務(wù)的項目需要用到Google Map。項目完成后，把一些常用的方法寫出來，供大家參考。

一、google地圖基礎(chǔ)顯示

（1）引用google map js資源

<!--國內(nèi)可用--> <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，反正我當(dāng)時申請key時花費了不少時間，申請google郵箱賬號時PC端不行，在移動端申請申請時又提示手機號碼無效，各種坑。

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

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

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

（3）初始化地圖

// 地圖中心坐標(biāo)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);

效果如下圖（左一）

?

?

二、自定義信息窗口、自定義圖標(biāo)以及自定義控件

// 自定義Marker標(biāo)記點 var marker = new google.maps.Marker({position: ?myLatLng,icon: '../car.png', // 如果為空則顯示默認的圖標(biāo)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 //設(shè)置為true時可禁用自動平移功能 });//打開信息窗體 infowindow.open(map, marker);//marker點事件，點擊關(guān)閉信息窗體 marker.addListener('click', function() {infowindow.close(); });//監(jiān)聽X關(guān)閉按鈕事件 google.maps.event.addListener(infowindow,"closeclick", function(){infowindow.close(); });

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

googl map默認開啟的控件有：

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

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

// 關(guān)閉地圖類型控件，打開縮小放大控件并設(shè)置其位置為坐下方 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。記不住沒有關(guān)系，你不妨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);

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

?

三、地址解析

// 地址解析方法 function pointToAddress(lat, lng, backcall) {// 實例化Geocoder服務(wù)用于解析地址var geocoder = new google.maps.Geocoder();// 地理反解析過程// 請求數(shù)據(jù)GeocoderRequest為location,值類型為LatLng因此我們要實例化經(jīng)緯度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);}}); }// 在需要解析的地方調(diào)用方法 pointToAddress(myCenter.lat, myCenter.lng, function (address) {// 獲得地址console.log(address); });

我們看到地圖上控件名稱顯示的是中文，如果用戶手機系統(tǒng)是英文，地圖也會自動切換為英文。暫時更新到這里，關(guān)于google map實現(xiàn)軌跡回放請前往博主的另外一篇文章。

?

總結(jié)

以上是生活随笔為你收集整理的Google Map API 的基础使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。