您的位置:首页 - 教程 - web前端 - 正文
js根据地理坐标确定地图中心位置
根据坐标的经纬度,在腾讯地图中确定位置。
<!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>


查看效果

评论: