谷歌地圖js獲取當前位置定位，
根據地址id轉換為地圖坐標，
根據經緯度坐標得到城市名稱，
地址輸入搜索可能結果匹配（結果為列表）
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<title>谷歌地圖，位置定位，地址搜索可能結果匹配</title>
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100%; width: 100%; }
.serachAddress li { list-style-type: none; border: 1px solid #ccc; padding: 2px 5px; margin-bottom: 5px; }
.tit { font-size: 12px; font-weight: bold; }
.txt { font-size: 10px; }
.msgDiv { display: inline-block; background: #fff; box-shadow: 3px 3px 3px 3px #c4c4c4; border: 1px solid #f64323; text-align: center; padding: 5px 16px; }
</style>
</head>
<body>
<div>
<div id="map" style=" margin:0 auto;width:80%;height:500px;"></div>
</div>
<div style="padding:20px;">
<div>
<input type="button" value="獲取當前位置定位" onclick="pageObj.fn.getPosition()" />
</div>
<div>
<input type="text" placeholder="請輸入地址" id="txtAutoCompute" oninput="pageObj.fn.AutocompleteSearch()" />
</div>
<div>
<ul class="serachAddress" id="autoSearchPlace">
<li>
<div class="tit">清苑</div>
<div class="txt">四川成都市武侯區江洋大道4563號</div>
</li>
<li>
<div class="tit">清苑</div>
<div class="txt">四川成都市武侯區江洋大道4563號</div>
</li>
</ul>
</div>
</div>
<!-- 消息浮框 -->
<!--<div style="position:fixed;z-index:2000;top:35%;width:100%;text-align:center;">
<div class="msgDiv">
請選擇計算節種類
</div>
</div>-->
<script type="text/javascript">
//地址搜索匹配可能結果（列表）
var autocompleteService;
//地址模糊匹配地理界限範圍
var bounds;
//地區消息
var infowindow;
//地址id解析器
var geocoder;
//定位標記
var goDoorMarker;
var posiontShow = 30;
var pageObj = {
fn: {
//地址輸入搜索可能結果匹配（結果為列表）
AutocompleteSearch: function () {
var address = document.getElementById('txtAutoCompute').value;
console.log(address);
if (address == "") {
return;
}
document.getElementById("autoSearchPlace").innerHTML = "查詢中...";
function displaySuggestions(predictions, status) {
if (status != google.maps.places.PlacesServiceStatus.OK) {
console.log(status);
return;
}
searchArr = predictions;
console.log(predictions);
//return;
var htmlArr = new Array();
predictions.forEach(function (prediction) {
var html = '<li placeId="' + prediction.place_id + '" >' +
'<div class="tit">' + prediction.structured_formatting.main_text + '</div>' +
'<div class="txt">' + prediction.description + '</div>' +
'</li>';
htmlArr.push(html);
});
document.getElementById("autoSearchPlace").innerHTML = htmlArr.join('');
};
var request = {
//地址模糊匹配地理界限範圍
//如果定位成功，則首選匹配查詢結果在此城市中
bounds: bounds,
input: address,
//types: ['geocode']
}
autocompleteService.getPlacePredictions(request, displaySuggestions);
//autocompleteService.getQueryPredictions(request, displaySuggestions);
}
//獲取當前位置定位
, getPosition: function () {
if (!navigator.geolocation) {
alert("當前不支持html5定位位置");
return;
}
var options =
{
enableHighAccuracy: true,//高精度定位
timeout: 8000,//毫秒，超時時間,超時后調用error
maximumAge: 0
};
navigator.geolocation.getCurrentPosition(function (position) {
console.log('當前定位：');
console.log(position);
var geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
//var result_mark = new google.maps.Marker({ position: geolocation });
//result_mark.setMap(map);
//map.panTo(geolocation);
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
//pageObj.fn.goMapToByPlaceId(position.placeId);
//設置查詢地圖範圍界限
bounds = circle.getBounds();
//console.log(circle);
console.log("定位設置成功");
pageObj.fn.alertMsg("定位設置成功");
pageObj.fn.getCityName(geolocation);
}, function (error) {
//处理错误
switch (error.code) {
case 1:
console.log("位置服务被拒绝");
pageObj.fn.alertMsg("位置服务被拒绝");
break;
case 2:
console.log("暂时获取不到位置信息");
pageObj.fn.alertMsg("暂时获取不到位置信息");
break;
case 3:
console.log("获取定位信息超时");
pageObj.fn.alertMsg("获取定位信息超时");
break;
default:
console.log("未知错误");
pageObj.fn.alertMsg("未知错误");
break;
}
}, options);
}
//根據地址id轉換為地圖坐標
, goMapToByPlaceId: function (placeId) {
geocoder.geocode({ 'placeId': placeId }, function (results, status) {
if (status === 'OK') {
var resultPosition = results[0];
console.log("定位地址：");
console.log(resultPosition);
if (resultPosition) {
map.setCenter(resultPosition.geometry.location);
goDoorMarker = new google.maps.Marker({
map: map,
position: resultPosition.geometry.location
});
goDoorMarker.address = resultPosition.formatted_address;
pageObj.fn.showMapInfo(resultPosition.formatted_address, goDoorMarker);
} else {
pageObj.fn.alertMsg(pageObj.words.noResult);
}
} else {
pageObj.fn.alertMsg(pageObj.words.positionDecodeError + ":" + status);
}
});
}
//根據經緯度坐標得到城市名稱
, getCityName: function (latlng) {
geocoder.geocode({ 'location': latlng }, function (results, status) {
if (status === 'OK') {
console.log(results);
//獲取區縣名稱，匹配數據找出區縣id
var quxian = results.find(w => w.types.filter(x => x == "sublocality_level_1").length > 0);
if (quxian != undefined) {
var quxianObj = quxian.address_components.find(w => w.types.filter(x => x == "sublocality_level_1").length > 0);
if (quxianObj != undefined && quxianObj != null) {
console.log("匹配到的區縣名稱=" + quxianObj.short_name);
}
}
var firstResult = results[0];
console.log("定位的詳細地址：");
console.log(firstResult);
//顯示定位標記
goDoorMarker = new google.maps.Marker({
map: map,
position: latlng
});
map.panTo(latlng);
goDoorMarker.address = firstResult.formatted_address;
pageObj.fn.showMapInfo(firstResult.formatted_address, goDoorMarker);
} else {
pageObj.fn.alertMsg(pageObj.words.latLngDecodeError + status);
}
});
}
//顯示白色消息框到地圖
, showMapInfo: function (msg, marker) {
infowindow.setContent(msg);
if (marker != null && marker != undefined) {
infowindow.open(map, marker);
} else {
infowindow.open(map);
}
}
//彈消息框自動消失
, alertMsg: function (msg) {
posiontShow = posiontShow + 5;
if (posiontShow > 60) {
posiontShow = 30;
}
var id = Math.round(Math.random() * 100000000);
var arrS = new Array();
arrS.push('<div id="' + id + '" style="position:fixed;z-index:2000;top:' + posiontShow + '%;width:100%;text-align:center;">');
arrS.push('<div class="msgDiv">');
arrS.push(msg);
arrS.push('</div></div>');
//document.getElementsByTagName("body")[0].innerHTML += arrS.join("");
var msgDom = document.createElement("div");
msgDom.innerHTML = arrS.join("");
document.getElementsByTagName("body")[0].appendChild(msgDom);
setTimeout(function () {
var dom = document.getElementById(id);
dom.parentNode.removeChild(dom);
}, 2000);
}
//fn結束
}
//pageObj 結束
};
function initMap() {
//默認定位成都
//30.659634242460026, 104.06582974016158
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(30.659634242460026, 104.06582974016158),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
zoomControl: false,
fullscreenControl: false
});
infowindow = new google.maps.InfoWindow;
//地址id轉換為坐標
geocoder = new google.maps.Geocoder;
//地址搜索匹配多個結果
autocompleteService = new google.maps.places.AutocompleteService();
pageObj.fn.getPosition();
}
</script>
<script src="http://maps.google.cn/maps/api/js?key=AIzaSyC4h57tChfgdfg7567fghfgh&libraries=places&callback=initMap" async defer></script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
