版权声明：版权是个什么玩意儿?看得上随便转 https://blog.csdn.net/Byte_Dance/article/details/85848275
百度地图API传送门: http://lbsyun.baidu.com/index.php?title=jspopular/guide/geolocation
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{
/*height:100%*/
}
.box{
width:600px;
height:400px;
margin:300px;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=秘钥">
//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
</script>
</head>
<body>
<div id="container" class="box"></div>
<script type="text/javascript">
var map = new BMap.Map("container");
// 创建地图实例
var point = new BMap.Point(113.742196,34.752043);
// 创建点坐标
map.centerAndZoom(point,20);
// 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
// map.setMapStyle({style:'grayscale'}); //黑夜地图效果
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker);
//定义位置坐标
// marker.enableDragging();
// marker.addEventListener("dragend", function(e){
// alert("当前位置：" + e.point.lng + ", " + e.point.lat);
// })
//定义信息窗口
var opt = {
width : 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "河南晶泰光电科技有限公司" , // 信息窗口标题
color:"red"
};
var infoWindow = new BMap.InfoWindow("安装LED显示屏,LED显示屏安装,LED显示屏报价,LED显示屏维修", opt); // 创建信息窗口对象
//监听小红点点击事件 点击后信息窗口显示
marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
});
//定义一个地图放大缩小控件
var opts = {type:BMAP_NAVIGATION_CONTROL_LARGE,offset: new BMap.Size(20,20)}
map.addControl(new BMap.NavigationControl(opts));
</script>
</body>
</html>使用定位
IP定位
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Hello, World</title>
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
#container {
/*height:100%*/
}
.box {
width: 600px;
height: 400px;
margin: 300px;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=nQAAUcgM8a3crA1enfABGDh7w0bbTodI">
</script>
</head>
<body>
<div id="allmap" class="box"></div>
<script>
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,10);
//这里在外部定义一个变量接收地理位置
var str = "";
function myFun(result){
var cityName = result.name;
map.setCenter(cityName);
str = cityName;
}
var myCity = new BMap.LocalCity();
myCity.get(myFun);
//要将取到的保价 直接使用是不行的，需要等到str元素被赋值好之后再使用，所以等2秒后再使用
setTimeout(function(){
console.log(str)
},2000)
</script>
</body>
</html>
定位SDK辅助定位
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
var geoc = new BMap.Geocoder();
// 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);
console.log(r.point)
var pt = r.point;
geoc.getLocation(pt, function(rs){
var addComp = rs.addressComponents;
alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
});
}
else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
//关于状态码
//BMAP_STATUS_SUCCESS 检索成功。对应数值“0”。
//BMAP_STATUS_CITY_LIST 城市列表。对应数值“1”。
//BMAP_STATUS_UNKNOWN_LOCATION 位置结果未知。对应数值“2”。
//BMAP_STATUS_UNKNOWN_ROUTE 导航结果未知。对应数值“3”。
//BMAP_STATUS_INVALID_KEY 非法密钥。对应数值“4”。
//BMAP_STATUS_INVALID_REQUEST 非法请求。对应数值“5”。
//BMAP_STATUS_PERMISSION_DENIED 没有权限。对应数值“6”。(自 1.1 新增)
//BMAP_STATUS_SERVICE_UNAVAILABLE 服务不可用。对应数值“7”。(自 1.1 新增)
//BMAP_STATUS_TIMEOUT 超时。对应数值“8”。(自 1.1 新增)
</script>