百度地图API试用--(初次尝试)

2016-03-17:

　　百度地图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>

百度地图API试用--(初次尝试)的更多相关文章

html5:地理信息 LBS基于地理的服务和百度地图API的使用
地理位置请求单次定位请求getCurrentPosition(请求成功函数,请求失败函数,数据收集方式) 多次定位请求watchPosition(请求成功函数,请求失败函数,数据收集方式) 关闭更新 ...
百度地图API开发指南
简介什么是百度地图API? 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富.交互性强的地图应用.百度地图API包含了构建地图基本功能的各种接口,提供 ...
【百度地图API】JS版本的常见问题
1.请问如何将我的店铺标注在百度地图上?我是否可以做区域代理?在百度地图上标注是否免费? 答复: 这里只负责API的技术咨询,不解决任何地图标注问题.在百度地图上标注自己公司,即气泡标注业务.该业务已 ...
百度地图API应用实践（一） —— 栅格图（草稿）
概述运用百度地图JS API,实现了在百度地图上绘制栅格并按统计值渲染栅格颜色.实现的过程是不断补习的过程,其中用到一些技术,是个人首次尝试.包括:(1)简单的jQuery语法,并实现Ajax:(2 ...
【百度地图API】如何自定义地图图层？实例：制作麻点图（自定义图层+热区）
原文:[百度地图API]如何自定义地图图层?实例:制作麻点图(自定义图层+热区) 摘要:自定义地图图层的用途十分广泛.常见的应用,比如制作魔兽地图和清华校园地图(使用切图工具即可轻松实现).今天我们来 ...
【百度地图API】关于如何进行城市切换的三种方式
原文:[百度地图API]关于如何进行城市切换的三种方式摘要:本文介绍了三种切换城市的方式:查询城市.城市列表和显示城市轮廓. ------------------------------------ ...
利用百度地图API和群蚁算法，对TSP问题进行模拟与求解
前言最近由于换了工作,期间也有反思和总结上家公司的得失,总觉得有什么事情当初可以完成或者完成得更好,其中TSP问题就是其中之一.当初在开发一个仓配系统的时候,有一个线路排程的需求,当时自己简单在纸上 ...
用百度地图API打造方便自己使用的手机地图
有钱人咱就不说了,因为偶是个穷银--因为穷,所以去年买的Huawei C8650+到现在还在上岗,对于没有钱买好的配置的手机的童鞋来说,类似于百度,谷歌,高德等商家的地图在自己的机器上跑起来确实是有点 ...
百度地图API图标、文本、图例与连线
百度地图开放平台功能强大,使用简单,为地图的自定义提供了非常方便的途径! 本文以绘制一张全国机器辐射图为例记录其基本使用方法,效果如下图: 图中包括了带图标和文本的标注,连线以及图例. 1.关于坐标 ...

随机推荐

jquery-fullpage-js制作页全屏滚动插件
有一个很棒的插件 http://www.ijquery.cn/demo/fullPage/
JS学习：第二周——NO.3盒子模型
1.CSS盒子模型包括四个部分组成:设定的宽高+padding+border+margin: 2.JS盒子模型:通过系统提供的属性和方法,来获取当前元素的样式值 JS提供的属性和方法: clien ...
Sicily 1215: 脱离地牢（BFS）
这道题按照题意直接BFS即可,主要要注意题意中的相遇是指两种情况:一种是同时到达同一格子,另一种是在移动时相遇,如Paris在(1,2),而Helen在(1,2),若下一步Paris到达(1,1),而 ...
svg + d3
为了实现元素的添加,删除,拖拽,左键点击,右键单击,悬浮等功能,使用了d3 + svg 的技术来实现界面. 最开始是采用canvas,但是由于功能原因放弃了该技术,可以看下 canvas简介另附:c ...
用遗传算法GA改进CloudSim自带的资源调度策略(2)
遗传算法GA的核心代码实现: 最核心: private static ArrayList<int[]> GA(ArrayList<int[]> pop,int gmax,dou ...
cf591d
题意:给出船的最大速度v,起点,终点.风在前t秒是一个方向,t秒后就一直是第二个方向.两个方向已知. 船速永远大于风速.问船在自由掌握速度和行驶方向的情况下,最快多久到终点. 分析:首先排除一种方法, ...
DL论文
题目:Accurate Image Super-Resolution Using Very Deep Convolutional Networks(2016CVPR) 摘要:文中提出了一种高精度处理单 ...
MMAP和DIRECT IO区别
看完此文,题目不言自明.转自 http://blog.chinaunix.net/uid-27105712-id-3270102.html 在Linux 开发中,有几个关系到性能的东西,技术人员非常关 ...
Mybatis 总结
1.如何传递多个参数 mybatis中,如果接口有多个参数,那么在mapper.xml中,可以通过#{0,VARCHAR},#{1,VARCHAR}或#{param1,VARCHAR},#{param ...
Linux 软件包管理
简介: linux中软件包的管理随着linux版本的不同而不同,一般RPM和DPKG是最常见的两类软件包管理工具.分别应用基于rpm软件包的linux发行版本和基于deb软件包的linux发行版本. ...

百度地图API试用--(初次尝试)

百度地图API试用--(初次尝试)的更多相关文章

随机推荐

热门专题