百度地图地位

百度API: http://lbsyun.baidu.com/ ，需要了解的可以进入官网进行学习。
本案例使用js定位获取。

<!DOCTYPE html>

<html>

<head>

html{

height:100%;

}

body{

height:100%;

margin:0px;

padding:0px;

}

#container{

height:100%;

}

</style>

</head>

<body>

//在指定的容器内创建地图实例，之后需要调用Map.centerAndZoom()方法对地图进行初始化。未进行初始化的地图将不能进行任何操作。

var map = new BMap.Map("container"); //在container容器中创建一个地图,参数container为div的id属性;

var point = new BMap.Point(112.6,27.25); //以指定的经度和纬度创建一个地理点坐标。

//如果center类型为Point时，zoom必须赋值，范围3-19级，若调用高清地图（针对移动端开发）时，zoom可赋值范围为3-18级。如果center类型为字符串时，比如“北京”，zoom可以忽略，地图将自动根据center适配最佳zoom级别。

map.centerAndZoom(point, 14); //初始化地图，设置中心点坐标和地图级别

map.enableScrollWheelZoom(); //激活滚轮调整大小功能

map.addControl(new BMap.NavigationControl()); //添加控件：缩放地图的控件，默认在左上角；

map.addControl(new BMap.MapTypeControl()); //添加控件：地图类型控件，默认在右上方；

map.addControl(new BMap.ScaleControl()); //添加控件：地图显示比例的控件，默认在左下方；

map.addControl(new BMap.OverviewMapControl()); //添加控件：地图的缩略图的控件，默认在右下方； TrafficControl

var search = new BMap.LocalSearch("中国", {

onSearchComplete: function(result){

if (search.getStatus() == BMAP_STATUS_SUCCESS){

var res = result.getPoi(0);

var point = res.point;

map.centerAndZoom(point, 11);

}

},renderOptions: { //结果呈现设置，

map: map,

autoViewport: true,

selectFirstResult: true

} ,onInfoHtmlSet:function(poi,html){//标注气泡内容创建后的回调函数，有了这个，可以简单的改一下返回的html内容了。

alert(html.innerText);

}//这一段可以不要，只不过是为学习更深层次应用而加入的。

});

//给地图添加点击事件获取经度，纬度

map.addEventListener("click",function(e){

document.getElementById("aa").innerHTML = "经度坐标："+e.point.lng+"  纬度坐标："+e.point.lat;

});

function setCity(){

search.search(document.getElementById("cityName").value);

}

search.search(document.getElementById("cityName").value);

</script>

</body>

</html>

顶

百度API: http://lbsyun.baidu.com/ ，需要了解的可以进入官网进行学习。
本案例使用js定位获取。

<!DOCTYPE html>

<html>

<head>

html{

height:100%;

}

body{

height:100%;

margin:0px;

padding:0px;

}

#container{

height:100%;

}

</style>

</head>

<body>

//在指定的容器内创建地图实例，之后需要调用Map.centerAndZoom()方法对地图进行初始化。未进行初始化的地图将不能进行任何操作。

var map = new BMap.Map("container"); //在container容器中创建一个地图,参数container为div的id属性;

var point = new BMap.Point(112.6,27.25); //以指定的经度和纬度创建一个地理点坐标。

map.centerAndZoom(point, 14); //初始化地图，设置中心点坐标和地图级别

map.enableScrollWheelZoom(); //激活滚轮调整大小功能

map.addControl(new BMap.NavigationControl()); //添加控件：缩放地图的控件，默认在左上角；

map.addControl(new BMap.MapTypeControl()); //添加控件：地图类型控件，默认在右上方；

map.addControl(new BMap.ScaleControl()); //添加控件：地图显示比例的控件，默认在左下方；

map.addControl(new BMap.OverviewMapControl()); //添加控件：地图的缩略图的控件，默认在右下方； TrafficControl

var search = new BMap.LocalSearch("中国", {

onSearchComplete: function(result){

if (search.getStatus() == BMAP_STATUS_SUCCESS){

var res = result.getPoi(0);

var point = res.point;

map.centerAndZoom(point, 11);

}

},renderOptions: { //结果呈现设置，

map: map,

autoViewport: true,

selectFirstResult: true

} ,onInfoHtmlSet:function(poi,html){//标注气泡内容创建后的回调函数，有了这个，可以简单的改一下返回的html内容了。

alert(html.innerText);

}//这一段可以不要，只不过是为学习更深层次应用而加入的。

});

//给地图添加点击事件获取经度，纬度

map.addEventListener("click",function(e){

document.getElementById("aa").innerHTML = "经度坐标："+e.point.lng+"  纬度坐标："+e.point.lat;

});

function setCity(){

search.search(document.getElementById("cityName").value);

}

search.search(document.getElementById("cityName").value);

</script>

</body>

</html>

猜你喜欢