百度地图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.关于坐标 ...

随机推荐

asp.net core 如何在Controller获取配置文件的值
场景:我们会把一些配置信息,写在配置文件文件中,便于我们修改和配置.在之前的asp.net 中可以通过ConfigurationManger来获取web.config里面的配置.在.net core ...
又一枚精彩的弹幕效果jQuery实现
精彩的弹幕效果分享给大家,具有一定的参考价值,感兴趣的朋友可以尝试制作弹幕,具体内容如下简易弹幕效果:将发布的内容随机显示在弹幕右侧,逐渐左移最后消失. 涉及知识点:val().random ...
OC与c混编实现Java的String的hashcode()函数
首先,我不愿意大家需要用到这篇文章里的代码,因为基本上你就是被坑了. 起因:我被Java后台人员坑了一把,他们要对请求的参数增加一个额外的字段,字段的用途是来校验其余的参数是否再传递过程中被篡改或因为 ...
【Android】Android如何一进入一个activity就弹出输入法键盘
在AndroidManife.xml中的Activity配置中加入 android:windowSoftInputMode="stateVisible|adjustResize"
redis的一些操作
public class WnsRedisFactory { private static Cache pool = null; private static JedisConnectionFacto ...
git用法之常用命令［克隆、提交］
1.克隆/下载项目 1)git clone git@git.soydai.cn:liuxuewen/static-file-3.0.git 或者 2)git clone http://git.soyd ...
linQ学习笔记之三高级语句
linq语句查询执行的时机第一步获取数据源 int [] obejct = new int[]{1,2,3,4,5,6,7,8,9} 第二步定义查询 var even = numbers.where ...
matlab绘图基础
matlab绘制条形图并分组显示: a =[1 2 3] b =[4 5 6] >> d=[a;b] d = 1 2 3 4 5 6 >> bar(d,'group') 修改横 ...
Google Code Jam 2016 Round 1C C
题意:三种物品分别有a b c个(a<=b<=c),现在每种物品各选一个进行组合.要求每种最和最多出现一次.且要求任意两个物品的组合在所有三个物品组合中的出现总次数不能超过n. 要求给出一 ...
css3-columns多列布局
/*css3中的布局*/ .wrapper{ margin:auto; width:300px; height:200px; border:2px dotted blue; -webkit-colum ...

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

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

随机推荐

热门专题