码迷,mamicode.com
首页 > 编程语言 > 详细

百度地图 JavaScript API

时间:2019-02-16 13:24:17      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:utf-8   otto   view   ott   定义   cti   open   order   context   

最近有点懒  项目结尾了  完了好长时间 没有去总结项目中的问题

想了下还是写写吧

这是一个关于百度地图的 网页展示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>欢迎页</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="${request.contextPath}/statics/css/bootstrap.min.css">
<!--引用百度地图API-->
<style type="text/css">
html,body{
margin:0;padding:0;
}
.iw_poi_title {
color:#CC5522;
font-size:14px;
font-weight:bold;
overflow:hidden;
padding-right:13px;
white-space:nowrap
}
.iw_poi_content {
font:12px arial,sans-serif;
overflow:visible;
padding-top:4px;
white-space:-moz-pre-wrap;
word-wrap:break-word
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
</head>
<body>
<!--百度地图容器-->
,,,,,,,,,,,
<div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent">

</div>
</body>
<script type="text/javascript">
//创建和初始化地图函数:
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
}

//创建地图函数:
function createMap(){
var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
var point = new BMap.Point(116.560358,39.02148);//定义一个中心点坐标
map.centerAndZoom(point,10);//设定地图的中心点和坐标并将地图显示在地图容器中
window.map = map;//将map变量存储在全局
}

//地图事件设置函数:
function setMapEvent(){
map.enableDragging();//启用地图拖拽事件,默认启用(可不写)
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)
map.enableKeyboard();//启用键盘上下左右键移动地图
}

//地图控件添加函数:
function addMapControl(){
//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(ctrl_nav);
//向地图中添加缩略图控件
var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
map.addControl(ctrl_ove);
//向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
map.addControl(ctrl_sca);
}


initMap();//创建和初始化地图
</script>
</html>

 

 

有不同的可以找搜==百度地图API去查找实例  有不同的控件组合

 

百度地图 JavaScript API

标签:utf-8   otto   view   ott   定义   cti   open   order   context   

原文地址:https://www.cnblogs.com/cxiang/p/10387233.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!