百度地图API试用--(初次尝试)
2016-03-17 22:32
357 查看
2016-03-17:
百度地图API申请key的步骤相对简单，不做过多阐述。
初次使用百度地图API感觉有点神奇，有些功能加进来以后有点问题，注释掉等有空再解决。
代码如下：
百度地图API申请key的步骤相对简单，不做过多阐述。
初次使用百度地图API感觉有点神奇，有些功能加进来以后有点问题，注释掉等有空再解决。
代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!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 {
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
}
#allmap {
width: 100%;
height: 100%;
}
p {
margin-left: 5px;
font-size: 14px;
}
#result {
width: 100%;
font-size: 12px;
}
dl,dt,dd,ul,li {
margin: 0;
padding: 0;
list-style: none;
}
dt {
font-size: 14px;
font-family: "微软雅黑";
font-weight: bold;
border-bottom: 1px dotted #000;
padding: 5px 0 5px 5px;
margin: 5px 0;
}
dd {
padding: 5px 0 0 5px;
}
li {
line-height: 28px;
}
#l-map {
height: 300px;
width: 100%;
}
#r-result {
width: 100%;
}
</style>
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=你的API密匙"></script> //密匙申请步骤比较容易，所以不做过多解释~加密后：aUQyZ3d0R2ZvMXA5OGxQZW5pZFV5eDho
<script type="text/javascript"
src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>
<link href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"
src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
<title>宝宝的地图</title>
</head>
<body>
<div id="allmap"></div>
<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 loadJScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://api.map.baidu.com/api?v=2.0&ak=iD2gwtGfo1p98lPenidUyx8h&callback=init";
document.body.appendChild(script);
}
window.onload = loadJScript; //异步加载地图
alert("异步成功开启");
</script>
<!-- 导航控件-->
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(113.275, 23.117), 11);
map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
// 添加带有定位的导航控件
var navigationControl = new BMap.NavigationControl({
// 靠左上角位置
anchor : BMAP_ANCHOR_TOP_LEFT,
// LARGE类型
type : BMAP_NAVIGATION_CONTROL_LARGE,
// 启用显示定位
enableGeolocation : true
});
map.addControl(navigationControl);
// 添加定位控件
var geolocationControl = new BMap.GeolocationControl();
geolocationControl.addEventListener("locationSuccess", function(e) {
// 定位成功事件
var address = '';
address += e.addressComponent.province;
address += e.addressComponent.city;
address += e.addressComponent.district;
address += e.addressComponent.street;
address += e.addressComponent.streetNumber;
//alert("当前定位地址为：" + address);
});
geolocationControl.addEventListener("locationError", function(e) {
// 定位失败事件
alert(e.message);
});
map.addControl(geolocationControl);
alert("导航控件开启");
</script>
<!-- 城市选择栏-->
<script type="text/javascript">
map.enableInertialDragging();
var size = new BMap.Size(10, 20);
map.addControl(new BMap.CityListControl({
anchor : BMAP_ANCHOR_TOP_RIGHT,
offset : size,
}));
var city = document.getElementById("cityName").value;
if(city != ""){
map.centerAndZoom(city,11); // 用城市名设置地图中心点
}
alert("城市选择栏控件开启");
</script>
<!-- 路况面板-->
<script type="text/javascript">
// 百度地图API功能
var ctrl = new BMapLib.TrafficControl({
showPanel: false //是否显示路况提示面板
});
map.addControl(ctrl);
ctrl.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT);
alert("路况控件开启");
</script>
<!-- 点击获取坐标 -->
<script type="text/javascript">
/*map.addEventListener("click",function(e){
alert(e.point.lng + "," + e.point.lat);
});*/
</script>
<!-- 检索控件-->
<script type="text/javascript">
//检索地图
map.centerAndZoom(poi, 16);
map.enableScrollWheelZoom();
var content = " "+" "+" "+" ";
//创建检索信息窗口对象
var searchInfoWindow = null;
var marker;
marker.enableDragging(); //marker可拖拽
map.addOverlay(marker); //在地图中添加marker
//marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
alert("检索控件开启");
</script>
<!-- 右键菜单控件-->
<script type="text/javascript">
/*
var map = new BMap.Map("allmap");
var point = new BMap.Point(113.275, 23.117);
map.centerAndZoom(point,15);
var menu = new BMap.ContextMenu();
var txtMenuItem = [
{
text:'放大',
callback:function(){map.zoomIn();}
},
{
text:'缩小',
callback:function(){map.zoomOut();}
}
];
for(var i=0; i < txtMenuItem.length; i++){
menu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));
}
map.addContextMenu(menu);
*/
</script>
<!-- 右键菜单删除标注控件-->
<script type="text/javascript">
/*
var removeMarker = function(e,ee,marker)
{
map.removeOverlay(marker);
}
//创建右键菜单
var markerMenu=new BMap.ContextMenu();
markerMenu.addItem(new BMap.MenuItem('删除',removeMarker.bind(marker)));
var marker = new BMap.Marker(poi);
map.addOverlay(marker);
marker.addContextMenu(markerMenu);
*/
</script>
<!-- 智能搜索控件-->
<script type="text/javascript">
/*// 百度地图API功能
function G(id) {
return document.getElementById(id);
}
//var map = new BMap.Map("allmap");
//map.centerAndZoom(new BMap.Point(113.275, 23.117),11); // 初始化地图,设置城市和地图级别。
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 对代理方法的理解iOS
- 二叉树重建
- 数组
- linux日志
- windows server git
- 设计模式C++学习笔记之四（Multition多例模式）
- 54. Spiral Matrix LeetCode
- 跳槽半年的一些想法
- 由于数组赋值超过定义的范围造成的错误
- ubuntu 14.04 mysql 主从配置
- C语言小编程之判断一个数是否是2的n次方的巧妙方法
- 设计模式之工厂方法模式及代码示例
- 类的构造函数
- angular 关于 factory、service、provider的相关用法
- DrawerLayout + Toolbar
- Hibernate中get方法和load方法的区别
- SQL Server 获取数据库表的元信息
- Java中String类的isEmpty()方法
- poj--1789 Truck History(最小生成树Prim算法)
- 北化oj 2374- A+B结果的个位数