前端调用百度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的更多相关文章
- 调用百度API返回经纬度
后台调用百度API接口生成: import java.io.BufferedReader; import java.io.IOException;import java.io.InputStreamR ...
- 调用百度API进行文本纠错
毕设做的是文本纠错方面,然后今天进组见研究生导师 .老师对我做的东西蛮感兴趣.然后介绍自己现在做的一些项目,其中有个模块需要有用到文本纠错功能. 要求1:有多人同时在线编辑文档,然后文档功能有类似Wo ...
- Vue 通过调用百度API获取地理位置-经度纬度省份城市
一.首先在百度api注册获得ak密钥 二.新建js文件,我命名为loadBMap.js,里面创建script,代码如下: /** * 加载地图 * @param {Function} callback ...
- 调用百度API将地名转为经纬度
最近做一道数据科学竞赛题,特征中有城市名和地名,需要转为经纬度来使用 故用python写了一个地名转经纬度的脚本,调用了百度地图的API,key在百度地图开放平台上申请 申请key的地方:http:/ ...
- PHP调用百度api生成短网址&根据短网址恢复长网址
接口api文档地址:http://dwz.cn/#/apidoc?_k=i9ev5p 代码demo header("Content-type: text/html; charset=utf- ...
- 怎样在自己的网页中调用百度API
https://blog.csdn.net/u010251278/article/details/52877370 以下内容转自上述网站,为了以后的学习方便,为此才特地将该网站内容转到自己的博客,多谢 ...
- java程序：调用百度api进行情感分析
源码: package com.jeson.ceshi; import java.util.HashMap; import org.json.JSONObject; import com.baidu. ...
- 调用百度API接口 正解析地址和逆解析
地址解析(结构化地址 解析得到 经纬度): public void SaveLocation(DataRequest<Location> request, DataResponse< ...
- 调用百度api的原理流程
1.为了实现酒店地址的定位 2.使用可视化便捷的百度地图API生成器:设置公司的地址和地图等级 3.设置地图的滚轮.缩放功能 4.获取代码,拷贝到html页面中 5.申请秘钥,在html中引用地图AP ...
随机推荐
- C++面试必备，概念解析
1.C和C++中struct有什么差别? 1> C++中的struct类似于class,有变量.有构造函数.虚函数等.有继承,多态等类的特征: 2> C中的struct仅仅有变量,不能有函 ...
- docker第一章
简介 Docker 是 Docker.Inc 公司开源的一个基于 LXC技术之上构建的Container容器引擎, 源代码托管在 GitHub 上, 基于Go语言并遵从Apache2.0协议开源. D ...
- Spark应用程序部署工具Spark Submit
不多说,直接上干货! spark-submit在哪个位置 [spark@master ~]$ cd $SPARK_HOME/bin [spark@master bin]$ pwd /usr/loca ...
- Android Studio将Eclipse的项目作为module的依赖库
情形: 我们现在有一个eclipse的项目,我们想把这个项目作为android studio的module的一个依赖库. 以前我们在eclipse的时候常常是在一个工作区里面把一个A工程 as a l ...
- 有关Canvas的一点小事—图像绘制
1. 使用canvas绘制图像 什么是图像?在js中它就是一个<img src=””>,<img>有两种接收图像信息的方法,一个是直接链接到图像地址,一个使用base64数据 ...
- CodeVs——T 3304 水果姐逛水果街Ⅰ
http://codevs.cn/problem/3304/ 时间限制: 2 s 空间限制: 256000 KB 题目等级 : 钻石 Diamond 题解 查看运行结果 题目描述 Des ...
- CMake - SWIG - 移植动态库
CMake - SWIG 最后更新日期:2014-04-25 bykagula 阅读前提:<CMake入门(二)>.<同Java的混合编程-SWIG>.Linux的基本操作.j ...
- js进阶 13-7 如何实现滑动面板效果
js进阶 13-7 如何实现滑动面板效果 一.总结 一句话总结:就是普通的jquery动画中的滑动效果.$('#content').slideToggle().滑动效果的实质是通过调整高度. 1.滑动 ...
- [转]MySQLHelper类
本文转自:http://de.cel.blog.163.com/blog/static/5145123620110181003903/ 类似于SQLHelper,只是这里引用的是MySql.Data类 ...
- javascript中的事件问题的总结
一.什么是事件? 事件就是DOM和浏览器之间的交互行为(只要触发了这个行为,也就相当于触发了事件),我们可以通过事件监听来绑定事件,例如:box.onclick=function(){},如果我们点击 ...