各家在线地图IP定位接口（百度地图、高德地图、QQ地图IP定位接口）
腾讯地图接口 JS开发的
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="textml; 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>指定IP定位</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
body, button, input, select, textarea {
font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
#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 geocoder = 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
});
geocoder = new qq.maps.Geocoder({
complete:function(result){
//result.detail.addressComponents.province
//alert('成功：'+result.detail.address);
alert('省：'+result.detail.addressComponents.province);
alert('市：'+result.detail.addressComponents.city);
city.innerHTML = '所在位置: ' + result.detail.address;
}
});
//获取 城市位置信息查询 接口
citylocation = new qq.maps.CityService({
//设置地图
map : map,
complete : function(results){
city.style.display = 'inline';
//city.innerHTML = '所在位置: ' + results.detail.name;
map.setCenter(results.detail.latLng);
//alert( results.detail.latLng);
geocoder.getAddress(results.detail.latLng);
}
});
}
function geolocation_ip() {
var clientip = document.getElementById("client_ip").value;
var city = document.getElementById("city");
//调用查询ip接口查询信息
citylocation.searchCityByIP(clientip);
}
</script>
</head>
<body onload="init()">
<div>
<input id="client_ip" type="textbox" value="116.21.86.239">
<input type="button" value="search" onclick="geolocation_ip()">
<span style="height:30px;display:none" id="city"></span>
</div>
</body>百度地图接口
http://api.map.baidu.com/location/ip?ip=你的IP&ak=你在百度申请的KEY
百度的一个HTML5应用实例（PC也能定位，但是没有手机准确）
<!DOCTYPE html>
<html>
<title>HTML5 HTML5 调用百度地图API地理定位实例</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你在百度申请的KEY "></script>
</head>
<body style="margin:50px 10px;">
<div id="status" style="text-align: center"></div>
<div style="width:600px;height:480px;border:1px solid gray;margin:30px auto" id="container"></div>
</body>
</html>
<script type="text/javascript">
window.onload = function() {
if(navigator.geolocation) {
document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser.";
// 百度地图API功能
var map = new BMap.Map("container");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
alert('您的位置：'+r.point.lng+','+r.point.lat);
}
else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
}
};
</script>高德地图接口
http://restapi.amap.com/v3/ip?ip=你的IP&key=你在高德申请的KEY
高德的一个HTML5应用实例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>地图显示</title>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main.css?v=1.0" />
<script src="http://webapi.amap.com/maps?v=1.3&key=你的高德KEY"></script>
</head>
<body>
<div id="mapContainer"></div>
<script>
navigator.geolocation.getCurrentPosition(geo_success, geo_error);
function geo_success(position) {
var map = new AMap.Map('mapContainer', {
// 设置中心点
center: [position.coords.longitude, position.coords.latitude],
// 设置缩放级别
zoom: 13
});
var marker = new AMap.Marker({
//复杂图标
icon: new AMap.Icon({
//图标大小
size: new AMap.Size(28, 37),
//大图地址
image: "http://webapi.amap.com/images/custom_a_j.png",
imageOffset: new AMap.Pixel(-28, 0)
}),
//在地图上添加点
position: [position.coords.longitude, position.coords.latitude]
});
marker.setMap(map);
}
function geo_error(msg) {
console.log(msg.code, msg.message);
}
</script>
</body>
</html>顶(1)
踩(0)
- 最新评论