DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> WEB前端代碼 >> js根據地理坐標確定地圖中心位置
js根據地理坐標確定地圖中心位置
編輯:WEB前端代碼     
根據坐標的經緯度,在騰訊地圖中確定位置。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>指定地理坐標定位</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
body, button, input, select, textarea {
font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
p{
width:603px;
padding-top:3px;
overflow:hidden;
}
#container{
min-width:600px;
min-height:767px;
}
</style>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
<script>
var citylocation,map,marker = null;
var init = function() {
var center = new qq.maps.LatLng(39.916527,116.397128);
var city = document.getElementById("city");
map = new qq.maps.Map(document.getElementById('container'),{
center: center,
zoom: 13
});
//調用城市服務信息
citylocation = new qq.maps.CityService({
complete : function(results){
map.setCenter(results.detail.latLng);
city.style.display = 'inline';
city.innerHTML = '所在位置: ' + results.detail.name;

if (marker != null) {
marker.setMap(null);
}
//設置marker標記
marker = new qq.maps.Marker({
map: map,
position: results.detail.latLng
});
}
});
}

function geolocation_latlng() {
//獲取經緯度信息
var input = document.getElementById("latLng").value;
//用,分割字符串截取兩位長度
var latlngStr = input.split(",",2);
//解析成浮點數 取值第一位 第二位
var lat = parseFloat(latlngStr[0]);
var lng = parseFloat(latlngStr[1]);
//設置經緯度信息
var latLng = new qq.maps.LatLng(lat, lng);
//調用城市經緯度查詢接口實現經緯查詢
citylocation.searchCityByLatLng(latLng);
}
</script>
</head>
<body onload="init()">
<div>
<input id="latLng" type="textbox" value="39.89477,116.35432">
<input type="button" value="search" onclick="geolocation_latlng()">
<span style="height:30px;display:none" id="city"></span>
</div>
<p>根據地理坐標確定地圖中心位置。</p>
<div id="container"></div>

</body>
</html>


查看效果
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved