前端切图:调用百度地图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.注册百度开发者账号并登陆 ...
随机推荐
- Font Awesome 图标如何使用
Font Awesome 图标如何使用 一.总结 一句话总结:Font Awesome字体图标非常好用,直接引入font-awesome.css,然后就可以直接使用了,使用的时候是用的i标签. 1.字 ...
- UART和RS232/RS485的关系，RS232与RS485编程
http://wpp9977777.blog.163.com/blog/static/4625100720138495943540/ 串口通讯是电子工程师和嵌入式开发工程师面对的最基本问题,RS232 ...
- python之字符串 元祖 列表 字典
一 字符串操作 语法:' ' 类型:str #首字母大写其余全部小写 test1 = 'yanShichenG' v = test1.capitalize() #全部小写(可以处理特殊字符) v1 = ...
- Django模板变量，过滤器和静态文件引用
模版路径查找 首先去settings.py里面找TEMPLATES ,在TEMPLATES下面找DIRS,找到就返回,没找到就继续往下,如果APP_DIRS设置为为Ture,那么就会到上面 INSTA ...
- GO语言学习（十二）Go 语言函数
Go 语言函数 函数是基本的代码块,用于执行一个任务. Go 语言最少有个 main() 函数. 你可以通过函数来划分不同功能,逻辑上每个函数执行的是指定的任务. 函数声明告诉了编译器函数的名称,返回 ...
- iOS_06_Mac os X
Mac os X 系统简介 * 苹果公司专门为苹果电脑设计的操作系统. * 以坚如磐石的UNIX为基础,既简单易用且功能强大. * x 是一个罗马数字正式的发音位“十”(ten),连续了先前的Mac ...
- nginx启用https访问
什么是https? https 全称:Hyper Text Transfer Protocol over Secure Socket Layer,是http的安全版.即http下加入SSL协议层,因此 ...
- 【SPOJ 694】Distinct Substrings
[链接]h在这里写链接 [题意] 给你一个长度最多为1000的字符串 让你求出一个数x,这个x=这个字符串的不同子串个数; [题解] 后缀数组题. 把原串复制一份,加在 ...
- [array] leetCode-1-Two Sum-Easy
leetCode-1-Two Sum-Easy descrition Given an array of integers, return indices of the two numbers suc ...
- （五）RabbitMQ消息队列-安装amqp扩展并订阅/发布Demo（PHP版）
原文:(五)RabbitMQ消息队列-安装amqp扩展并订阅/发布Demo(PHP版) 本文将介绍在PHP中如何使用RabbitMQ来实现消息的订阅和发布.我使用的系统依然是Centos7,为了方便, ...