移动地图

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>移动端地图</title>
</head>
<script>
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + "px";
window.addEventListener("resize",function(){
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + "px";
},false);
</script>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
#header{
font-size:0.26rem;
color:#fff;
width:100%;
height:0.8rem;
line-height:0.8rem;
background:#1d3e21;
text-align:center;
position:fixed;
top:0;
left:0;
z-index:2;
}
</style>
<body>
<div id="container"></div>
<div id="header">百度头部</div>
</body>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=PeBUf5626HGDsEWw2Hk8e6sw6TrsRv32"></script>

<script>
//创建地图实例
var map = new BMap.Map("container");
//设置中心点坐标
var point = new BMap.Point(120.20000,30.26667);
//北京坐标 116.404, 39.915
//杭州坐标 120.20000,30.26667
//地图初始化，同时设置地图展示级别
//BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。
map.centerAndZoom(point, 11);
//开启鼠标滚轮缩放
map.enableScrollWheelZoom(true);

//步行规划
//renderOptions 搜索结果的呈现设置当给定map参数时，改地图将自动将视野定位到当前城市
//autoViewport检索结束后是否自动调整地图视野
//var walking = new BMap.WalkingRoute(map,{renderOptions:{map:map,autoViewport:true}});
//walking.search("西湖动物园","苏堤");
/*var walk = new BMap.WalkingRoute(map, {
renderOptions: {map: map}
});
walk.search("西湖动物园", "苏堤");*/

//驾车路线规划
var driving = new BMap.DrivingRoute(map, {
renderOptions: {
map: map,
autoViewport: true
}
});
driving.search("西湖动物园", "苏堤");

/*//公交路线规划
var transit = new BMap.TransitRoute(map, {
renderOptions: {map: map}
});
transit.search("西湖动物园", "苏堤");*/

//添加信息窗口
/*var opts = {
width : 200, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "Hello" // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow("World", opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口*/

//城市检索
//search方法提供根据关键字检索特定POI信息服务。
//var map = new BMap.Map("container");
//map.centerAndZoom(new BMap.Point(120.20000,30.26667), 11);
var local = new BMap.LocalSearch(map, {
renderOptions:{map: map}
});
local.search("西湖");

//圆形区域检索
//searchNearby方法提供圆形区域检索服务。
//var map = new BMap.Map("container");
//map.centerAndZoom(new BMap.Point(120.20000,30.26667), 11);
var local = new BMap.LocalSearch(map,
{ renderOptions:{map: map, autoViewport: true}});
local.searchNearby("小吃", "前门");

/*//矩形区域检索
//searchInBounds方法提供矩形区域检索服务。
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
var local = new BMap.LocalSearch(map,
{ renderOptions:{map: map}});
local.searchInBounds("银行", map.getBounds());*/

/*//配置搜索
//BMap.LocalSearch提供了若干配置方法，通过它们可以自定义搜索服务的行为以满足您的需求。
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
var local = new BMap.LocalSearch("北京市",
{renderOptions: {map: map,autoViewport: true},pageCapacity: 8});
local.search("中关村");*/

//地址解析
/*//指定经纬度获取地址
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(120.20000,30.26667), 11);
// 创建地理编码实例
var myGeo = new BMap.Geocoder();
// 根据坐标得到地址描述
myGeo.getLocation(new BMap.Point(120.20000,30.26667), function(result){
if (result){
alert(result.address);
}
});*/
/*//鼠标点击获取地址
var map = new BMap.Map("container");
var point = new BMap.Point(120.20000,30.26667);
map.centerAndZoom(point,11);
var geoc = new BMap.Geocoder();
map.addEventListener("click", function(e){
var pt = e.point;
geoc.getLocation(pt, function(rs){
var addComp = rs.addressComponents;
alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
});
});*/

/*//定位SDK辅助定位
var geolocation = new BMap.Geolocation();
// 开启SDK辅助定位
geolocation.enableSDKLocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
console.log(mk)
map.addOverlay(mk);
map.panTo(r.point);
alert('您的位置：'+r.point.lng+','+r.point.lat);
}
else {
alert('failed'+this.getStatus());
}
});*/
</script>
</html>

猜你喜欢