本帖最后由 弱弱的小粥粥 于 2016-10-18 11:23 编辑
昨天刚学习了 H5地理信息定位 和 百度地图API;
刚开始接触API这个东西,那是一脸蒙蔽，二脸蒙蔽，无数脸蒙蔽！
楼主是咬紧牙关看完的！看完之后觉得API不过是一些方法的调用而已。
毕竟是人家开放的接口，会用这些函数就行了！有机会再更深层次的研究！
PS：百度地图开放平台http://lbsyun.baidu.com/ v1.5版本需要密钥，密钥可以免费申请！
可能是笔记本没有GPS芯片的原因！楼主的位置跑到东南亚去了！
但是测试手机端无误！所以建议使用手机端测试！
接下来放上的我HTML和JS代码
[HTML] 纯文本查看 复制代码 <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4&ak=您的密匙"></script>
<style>
body,html,#map{
width: 100%;
height: 100%;
margin:0px;
}
#map{
border:#ccc solid 1px;
}
</style>
</head>
<body>
<!--百度地图容器-->
<div id="map"></div>
</body>
</body>
[JavaScript] 纯文本查看 复制代码 <script type="text/javascript">
//创建和初始化地图函数：
function initMap(longitude,latitude){
createMap(longitude,latitude);//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
addMapOverlay();//向地图添加覆盖物
}
function createMap(longitude,latitude){
map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(longitude,latitude),15);
}
function setMapEvent(){
map.enableScrollWheelZoom();
map.enableKeyboard();
map.enableDragging();
map.enableDoubleClickZoom()
}
function addClickHandler(target,window){
target.addEventListener("click",function(){
target.openInfoWindow(window);
});
}
function addMapOverlay(){
}
//向地图添加控件
function addMapControl(){
var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
map.addControl(scaleControl);
var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:0});
map.addControl(navControl);
var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
map.addControl(overviewControl);
}
var map;
var pos=document.getElementById("pos");
var geo=window.navigator.geolocation;
if(geo){
var options={
enableHighAccuracy:false,
maximumAge:1000,
timeout:10000
}
geo.getCurrentPosition(onSuccess,onError,options);
function onSuccess(position){
var longitude =position.coords.longitude;//获取经度坐标
var latitude=position.coords.latitude;//获取纬度坐标
initMap(longitude,latitude);
}
}
function onError(error){
switch(error.code){
case 1 : alert(error.message);//用户选了不允许
break;
case 2: alert(error.message);//连不上GPS卫星，或者网络断了
break;
case 3: alert(error.message);//超时了
break;
default: alert(error.message);//未知错误，其实是err.code==0的时候
break;
}
}
</script>
| 
发表于 2016-10-18 11:20
|
发表于 2016-10-18 12:02
