前端切图:调用百度地图API
原型图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<!--调用百度地图api-->
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true">
</script>
<title></title>
<style>
/*服务网点*/
#wrap {
width: 1196px;
height: 540;
margin: auto;
overflow: hidden;
}
#wrap div ._left {
width: 281px;
float: left;
height: 339px;
border-right: 1px solid #CCCCCC;
}
#wrap ul {
width: 1196px;
height: 50px;
border-bottom: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
margin-bottom: 57px;
}
/*搜索框城市*/
#input {
width: 360px;
height: 37px;
margin-left: 51px;
}
</style>
</head>
<body>
<!--服务网点与帮助中心-->
<div id="wrap">
<ul></ul>
<!--服务网点-->
<!--百度地图容器-->
<div style="width: 563px; height: 435px; float: left; margin-bottom: 142px;" id="dituContent"></div>
<div style="float: left;">
<input type="text" id="input" />
<input type="button" onclick="searchMap();" value="搜索地图" style="width: 160px; height: 39px;" />
</div>
<!--百度地图容器结束-->
</div>
</body>
<script type="text/javascript">
//创建和初始化地图函数:
function initMap() {
createMap(114.025974, 22.546054); //创建地图
setMapEvent(); //设置地图事件
addMapControl(); //向地图添加控件
}
//地图搜索
function searchMap() {
var area = document.getElementById("input").value; //得到地区
var ls = new BMap.LocalSearch(map);
ls.setSearchCompleteCallback(function(rs) {
if(ls.getStatus() == BMAP_STATUS_SUCCESS) {
var poi = rs.getPoi(0);
if(poi) {
createMap(poi.point.lng, poi.point.lat); //创建地图(经度poi.point.lng,纬度poi.point.lat)
setMapEvent(); //设置地图事件
addMapControl(); //向地图添加控件
}
}
});
ls.search(area);
}
//创建地图函数:
function createMap(x, y) {
var map = new BMap.Map("dituContent"); //在百度地图容器中创建一个地图
var point = new BMap.Point(x, y); //定义一个中心点坐标
map.centerAndZoom(point, 12); //设定地图的中心点和坐标并将地图显示在地图容器中
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的更多相关文章
- 【c#】Form调用百度地图api攻略及常见问题
首先,在Form中调用百度地图api,我们需要使用webbrowser控件,这个在前面的文章中已经讲过了,可以参照(http://blog.csdn.net/buptgshengod/article/ ...
- 调用百度地图Api实现的查看地图功能的小插件
1. 功能 bMap.js 可根据地理位置调用出百度地图,采用弹出框形式 2.用法 var city = '青岛市'; var address = '香港中路'; bMap.init({ city : ...
- HTML5调用百度地图API获取当前位置并直接导航目的地的方法
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <meta charset="UTF-8&quo ...
- HTML5 调用百度地图API地理定位
<!DOCTYPE html> <html> <title>HTML5 HTML5 调用百度地图API地理定位实例</title> <head&g ...
- 跨平台移动开发_PhoneGap 使用Geolocation基于所在地理位置坐标调用百度地图API
使用Geolocation基于所在地理位置坐标调用百度地图API 效果图 示例代码 <!DOCTYPE html> <html> <head> <title& ...
- HTML5调用百度地图API进行地理定位实例
自从HTML5的标准确定以后,越来越多的网站使用HTML5来进行开发.虽然对HTML5支持的浏览器不是很多,但是依然抵挡不了大伙对HTML5开发的热情.今天为大家带来的是使用HTML5调用百度地图AP ...
- HTML5页面直接调用百度地图API,获取当前位置,直接导航目的地
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <meta charset="UTF-8"&g ...
- 调用百度地图API的总结
因为项目要用到百度地图,所以先摸索了一下,各种功能官方都有文档,点击可查看,文章的话我就直接写我用到的功能例子了,要用可以直接复制粘贴~ 一.主要涉及到的几个接口(先申请密钥): 1.技术一:坐标转换 ...
- web开发调用百度地图API + AK申请
web开发调用百度地图API + AK申请 要使用百度地图的API我们首先需要在我们的html页面引入js----`` 如何获取百度地图ak: 1.登陆百度地图开发者平台 2.注册百度开发者账号并登陆 ...
随机推荐
- HDU 2489 Minimal Ratio Tree(prim+DFS)
Minimal Ratio Tree Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Other ...
- code-代码平台服务器路径
下面记录的是各个平台的服务器路径(va使用) ("repo init -u ssh://vanzo/platform_89/manifest.git") ("repo i ...
- AndroidStudio MAT LeakCanary 内存分析之 LeakCanary
现在我们换一种更清晰方便的方式:LeakCanary https://github.com/square/leakcanary 首先将LeakCanary绑在我们的app上 build.gradle ...
- 逆波兰法(计算器)程序<无括号版>
涉及队列.栈的运用. Java中队列可以用: Queue<String> q = new LinkedList(); 来声明,其主要的方法有: poll(),peak(),offer(), ...
- Appium_Java_API
1. driver.findElement(MobileBy.AndroidUIAutomator("邀请")).click();2. driver.findElementById ...
- 常用的织梦dedecms安全设置集合整理
织梦系统用户很多,被发现的漏洞也就相对很多,所以网站安全需要做好,很多所谓的“黑客”都是用工具来扫描入侵,厉害点的人是不屑来黑我们的小网站的,所以在我们不是专业维护人员情况下,做好一般的安全防护就可以 ...
- 【Educational Codeforces Round 31 A】Book Reading
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 水模拟 [代码] #include <bits/stdc++.h> using namespace std; const ...
- Caused by: java.lang.NoSuchMethodException: <init> [class android.content.Context, interface android
在写自己定义的view时,有时会报下面错误: Caused by: java.lang.NoSuchMethodException: <init> [class android.co ...
- TCP的滑动窗口与拥塞窗口
一.滑动窗口 滑动窗口协议是传输层进行流控的一种措施,接收方通过通告发送方自己的窗口大小,从而控制发送方的发送速度,从而达到防止发送方发送速度过快而导致自己被淹没的目的. 对ACK的再认识,ack ...
- Oracle数据库(三)
专题一:oracle查询 1.where查询 查询部门编号是1的部门信息 ; 查询姓名是kw的员工,字符串使用‘’,内容大小写敏感 select *from emp where name='kw' 查 ...