<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=GHXDEbjB7YBYEHkzY0DZjpzEa1I5H7ed"></script>
<title>地图展示</title>
</head>
<body>
<h1>Hello world</h1>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// GL版命名空间为BMapGL
// 按住鼠标右键，修改倾斜角和角度
var map = new BMapGL.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMapGL.Point(116.404, 39.915),5); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.addControl(new BMap.NavigationControl());
</script>`在这里插入代码片`
map.setZoom (10) // Establecer el nivel del mapa map.getZoom () // Obtener el nivel del mapa
map.setCenter (point); // Establecer el punto central del mapa map.getCenter () // Obtener el punto central var
point = new BMapGL. Point (lng, lat); // El objeto point establece los niveles máximos y mínimos permitidos por el mapa a través de los métodos
map.setMinZoom (4); map.setMaxZoom (20);
Al crear una instancia de mapa, establezca los niveles máximo y mínimo permitidos por el mapa a través de opts var map = new BMapGL.Map ('container', { minZoom: 5, maxZoom: 20}); var scaleCtrl = new BMapGL.ScaleControl (); // Agrega un control de escala para mostrar el mapa de kilómetros ampliado.addControl (scaleCtrl); var navi3DCtrl = new BMapGL.NavigationControl3D (); // Agregar mapa de control 3D.addControl (navi3DCtrl); var mapType1 = new BMap.MapTypeControl ({mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP], anchor: BMAP_ANCHORFT )
添加缩略图
var mapType1 = new BMap.MapTypeControl(
{
mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP],
anchor: BMAP_ANCHOR_TOP_LEFT
}
);
var overView = new BMap.OverviewMapControl();
var overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
//添加地图类型和缩略图
function add_control(){
map.addControl(mapType1); //2D图，混合图
map.addControl(overView); //添加默认缩略地图控件
map.addControl(overViewOpen); //右下角，打开
}
//移除地图类型和缩略图
function delete_control(){
map.removeControl(mapType1); //移除2D图，混合图
map.removeControl(overView);
map.removeControl(overViewOpen);
}
// Crear un marcador de puntos
var marker1 = new BMapGL.Marker (new BMapGL.Point (116.404, 39.925));
// Agregar un marcador de puntos en el mapa
map.addOverlay (marker1);
// El marcador de puntos se puede arrastrar
var marker = new BMapGL.Marker (point, { enableDragging: true // Arrastrando disponible }); map.addOverlay (marcador); animación de perspectiva de trayectoria var path = [{ 'lng': 116.297611, 'lat': 40.047363 }, { 'lng' : 116.307223, 'lat': 40.056379 }]; var point = []; for (var i = 0; i <path.length; i ++) { point.push (new BMapGL.Point (path [i] .lng, path [i] .lat)); } var pl = new BMapGL.Polyline (point); setTimeout ('start ()', 3000); function start () {
trackAni = new BMapGLLib.TrackAnimation (bmap, pl, { OverallView: true, tilt: 30, duration: 20000, delay: 300 }); trackAni.start (); } trackAni.pause (); // Track pause trackAni.continue (); // El seguimiento continúa Haga clic para obtener la latitud y la longitud map.addEventListener ('click', function (e) { alert ('Latitud y longitud de la ubicación del clic:' + e.latlng.lng + ',' + e.latlng.lat); } ); map.setMapType (BMAP_EARTH_MAP); // Establece el tipo de mapa en modo terrestre
// 覆盖区域图层测试
map.addTileLayer(new BMap.PanoramaCoverageLayer());
var stCtrl = new BMap.PanoramaControl(); //构造全景控件
stCtrl.setOffset(new BMap.Size(20, 20));
map.addControl(stCtrl);//添加全景控件
//关键字检索
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
var local = new BMap.LocalSearch(map, {
renderOptions:{
map: map}
});
local.search("景点");
//多关键字本地搜索
var myKeys = ["酒店", "加油站"];
var local = new BMap.LocalSearch(map, {
renderOptions:{
map: map, panel:"r-result"},
pageCapacity:5
});
local.searchInBounds(myKeys, map.getBounds());
<title>关键字输入提示词条</title>
</head>
<body>
<div id="l-map"></div>
<div id="r-result">请输入:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" /></div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
function G(id) {
return document.getElementById(id);
}
var map = new BMap.Map("l-map");
map.centerAndZoom("北京",12); // 初始化地图,设置城市和地图级别。
var ac = new BMap.Autocomplete( //建立一个自动完成的对象
{
"input" : "suggestId"
,"location" : map
});
ac.addEventListener("onhighlight", function(e) {
//鼠标放在下拉列表上的事件
var str = "";
var _value = e.fromitem.value;
var value = "";
if (e.fromitem.index > -1) {
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
value = "";
if (e.toitem.index > -1) {
_value = e.toitem.value;
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
G("searchResultPanel").innerHTML = str;
});
var myValue;
ac.addEventListener("onconfirm", function(e) {
//鼠标点击下拉列表后的事件
var _value = e.item.value;
myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
setPlace();
});
function setPlace(){
map.clearOverlays(); //清除地图上所有覆盖物
function myFun(){
var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
map.centerAndZoom(pp, 18);
map.addOverlay(new BMap.Marker(pp)); //添加标注
}
var local = new BMap.LocalSearch(map, {
//智能搜索
onSearchComplete: myFun
});
local.search(myValue);
}
</script>