Google Map API V3開發（1）

Google Map API V3開發（2）

Google Map API V3開發（3）

Google Map API V3開發（4）

Google Map API V3開發（5）

Google Map API V3開發（6） 代碼

?

?

11?庫

???AdSense Library

???繪圖庫

???幾何圖形庫

???Panoramio?圖層（庫）

???地方信息庫

???天氣和云況圖層（庫）

?

幾何圖形庫

Google Maps JavaScript API V3?幾何圖形庫提供了一些實用程序函數，以便計算地球表面的幾何數據。該庫包含以下三個命名空間：

spherical，其中包含球面幾何圖形實用程序，可用于通過緯度和經度計算角度、距離和面積。

encoding，其中包含一些實用程序，可用于根據編碼折線算法對折線路徑進行編碼和解碼。

poly，其中包含一些實用程序函數，用于有關多邊形和折線的計算。

要計算該距離，請調用?computeDistanceBetween()，并向其傳遞兩個?LatLng?對象。

在有多個位置的情況下，您可改為使用?computeLength()?來計算給定路徑的長度。

距離結果以米為單位表示。

要計算多邊形區域的面積（以平方米為單位），請調用?computeArea()，并傳遞?LatLng?對象數組以定義閉合區域。

?????距離計算

???????? //根據經緯度計算距離

??????? private double rad(double d)

??????? {

??????????? return d * Math.PI / 180.0;

??????? }

??????? public double getDistance(double lat1, double lng1, double lat2, double lng2)

??????? {

??????????? double radLat1 = rad(lat1);

??????????? double radLat2 = rad(lat2);

??????????? double a = radLat1 - radLat2;

??????????? double b = rad(lng1) - rad(lng2);

??????????? double s = 2 * Math.Asin(Math.Sqrt(Math.Pow(Math.Sin(a / 2), 2) + Math.Cos(radLat1) * Math.Cos(radLat2) *

???????????????????????????????? Math.Pow(Math.Sin(b / 2), 2)));

??????????? s = s * 6378137;

??????????? s = Math.Round(s * 10000);

??????????? s = s / 10000;

??????????? return s;//計算單位：公里

??????? }

地方信息庫

???地方搜索請求

var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);

var request = {
? ? location: pyrmont,
? ? radius: '500',
? ? types: ['store']
? };

? service = new google.maps.places.PlacesService(map);
? service.search(request, callback);

function callback(results, status) {
? if (status == google.maps.places.PlacesServiceStatus.OK) {
? ? for (var i = 0; i < results.length; i++) {
? ? ? var place = results[i];
? ? ? createMarker(results[i]);
? ? }
? }
}

???文字搜索請求

var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);

var request = {
? ? location: pyrmont,
? ? radius: '500',
? ? query: 'restaurant'
? };

? service = new google.maps.places.PlacesService(map);
? service.textSearch(request, callback);

???地方詳情請求

地方信息服務不僅可以提供某區域內的地方信息列表，還可以返回關于特定地方的詳細信息。當地方搜索響應中返回某個地方后，其?reference?屬性可用于請求關于該地方的更多詳情，例如其完整地址、電話號碼用戶評分和評論等。

var request = {
? reference: 'CnRkAAAAGnBVNFDeQoOQHzgdOpOqJNV7K9-c5IQrWFUYD9TNhUmz5-aHhfqyKH0zmAcUlkqVCrpaKcV8ZjGQKzB6GXxtzUYcP-muHafGsmW-1CwjTPBCmK43AZpAwW0FRtQDQADj3H2bzwwHVIXlQAiccm7r4xIQmjt_Oqm2FejWpBxLWs3L_RoUbharABi5FMnKnzmRL2TGju6UA4k'
};

reference，包含可用于日后查詢“詳情”服務的令牌。該令牌可能與向“詳情”服務發送的請求中所使用的引用不同。建議您定期更新為地方信息存儲的引用。盡管該令牌可唯一地標識地方，但反之則不然：一個地方可能擁有多個有效的引用令牌。

service = new google.maps.places.PlacesService(map);
service.getDetails(request, callback);

function callback(place, status) {
? if (status == google.maps.places.PlacesServiceStatus.OK) {
? ? createMarker(place);
? }
}

???地方信息自動填充

“地方自動填充”功能會附到您網頁上的文本字段中，并監控用戶在該字段中輸入的字符。在用戶輸入文字的同時，自動填充會采用下拉選擇列表的形式向應用返回地方預測。

var defaultBounds = new google.maps.LatLngBounds(
? new google.maps.LatLng(-33.8902, 151.1759),
? new google.maps.LatLng(-33.8474, 151.2631));

var input = document.getElementById('searchTextField');
var options = {
? bounds: defaultBounds,
? types: ['establishment']
};

autocomplete = new google.maps.places.Autocomplete(input, options);

???獲取地方信息

當用戶從附加到文本字段的預測中選擇了一個地方后，該服務就會觸發?place_changed?事件。地方信息服務還會返回?PlaceResult?對象，您可以通過對?Autocomplete?對象調用?getPlace()?來訪問該對象。

google.maps.event.addListener(autocomplete, 'place_changed', function() {
? var place = autocomplete.getPlace();
? if (place.geometry.viewport) {
? ? map.fitBounds(place.geometry.viewport);
? } else {
? ? map.setCenter(place.geometry.location);
? ? map.setZoom(17);
? }
? var image = new google.maps.MarkerImage(
? ? ? place.icon, new google.maps.Size(71, 71),
? ? ? new google.maps.Point(0, 0), new google.maps.Point(17, 34),
? ? ? new google.maps.Size(35, 35));
? marker.setIcon(image);
? marker.setPosition(place.geometry.location);
});

轉載于:https://www.cnblogs.com/jhlong/p/5394793.html

總結

以上是生活随笔為你收集整理的Google Map API V3开发（5）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。