<!DOCTYPE html> | |
<html> | |
<head> | |
<title>使用百度地图位置定位</title> | |
<meta charset="utf-8" /> | |
<script src="http://api.map.baidu.com/api?v=2.0&ak=HbUVYMUg6PwbOnXkztdgSQlQ"></script> | |
</head> | |
<body> | |
<div id="allmap" style="width:800px;height:600px"></div> | |
<script> | |
var map = new BMap.Map("allmap"); | |
/* | |
* 使用浏览器定义 - 得到当前位置的经度和纬度 不准确 | |
* Geolocation类 | |
* * 作用 - 返回用户当前的位置 | |
* * 问题 - 依靠浏览器来实现当前位置定位的功能 | |
* * 构造器 - Geolocation() | |
* * 方法 | |
* * getCurrentPosition(callback)方法 | |
* * 作用 - 返回用户当前位置 | |
* * 参数callback | |
* * 定位成功,该回调函数具有一个GeolocationResult参数 | |
* GeolocationResult类 | |
* * 作用 - 返回当前位置的经度和纬度 | |
* * 属性 | |
* * point - 当前位置坐标值(经度和纬度) | |
*/ | |
/* | |
var local = new BMap.Geolocation(); | |
local.getCurrentPosition(function(result){ | |
// result.point获取的坐标值 - 不准确 | |
console.log(result.point.lng); | |
console.log(result.point.lat); | |
}); | |
*/ | |
/* | |
* 使用地址解析方式 - 到当前位置的经度和纬度 推荐 | |
* Geocoder类 | |
* * 作用 - 用于获取用户的地址解析 | |
* * 构造器 - Geocoder() | |
* * 方法 | |
* * getPoint(address,callback,city)方法 | |
* * 作用 - 对指定的地址进行解析 | |
* * 参数 | |
* * address - 设置解析的地址内容 | |
* * callback - 回调函数 | |
* * 地址定位成功,具有Point参数 | |
* * city - 当前中心城市 | |
*/ | |
var geo = new BMap.Geocoder(); | |
geo.getPoint("广东省广州市从化市广州大学华软软件学院",function(point){ | |
console.log(point); | |
/* | |
console.log(point.lng); | |
console.log(point.lat); | |
*/ | |
var marker = new BMap.Marker(point); | |
map.centerAndZoom(point,16); | |
map.addOverlay(marker); | |
/* | |
* 鼠标点击标注,打开信息窗口 | |
* InfoWindow类 - 信息窗口 | |
* * 构造器 - InfoWindow(addr,options) | |
* * addr - 设置的地址 | |
* * options - 设置信息窗口的设置 | |
*/ | |
var opts = { | |
width : 200, | |
height: 100, | |
title : "达内Web前端培训" | |
} | |
// 创建信息窗口对象 | |
var info = new BMap.InfoWindow("地址:文博大厦2层.",opts); | |
// 为标注绑定click事件 | |
marker.addEventListener("click",function(){ | |
// 打开信息窗口 | |
map.openInfoWindow(info,point); | |
}); | |
},"广东省"); | |
</script> | |
</body> | |
</html> |
03-27
03-27
12-14
“相关推荐”对你有帮助么?
-
非常没帮助
-
没帮助
-
一般
-
有帮助
-
非常有帮助
提交