百度地图API的调用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>地图 - 老干部管理信息系统</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<style type="text/css">
body{font-size:14px;}
h5{line-height:3em;padding:;margin:;} .txt{border:1px solid #ccc;background:none;padding:1px; width:400px;}
.f-l{float:left;}
.t-c{text-align:center;}
.clear{clear:both;}
.hidden{display:none;}
.searchbox{border:4px solid #e5ecf9;height:40px;float:left;line-height:40px;padding: 20px;margin: 50px;}
.mainbox{margin:20px ;}
.boxmap{width:700px;height:500px;border:1px solid gray;float:left;}
.boxpanel{width:250px;float:left;margin: 10px;border:1px solid gray;padding: 10px 10px;}
#startPanel,#endPanel{border:1px solid #FA8722;font-size:12px;}
#startPanel div,#endPanel div{padding:5px;}
#startPanel p,#endPanel p{margin:;padding:;line-height:.2em;}
#drivingPanel{border:1px solid #6688EE;}
</style> </head>
<body>
<div>
<!-- <img class="f-l" src="pictures/book.png" width="50px" height="50px" alt="老干部管理信息系统"/> -->
<div class="searchbox">
位置：<input class="txt" type="text" value="天安门" id="searchPlace" />
周边：<select
id="aroundType">
<option>医院</option>
<option>学校</option>
<option>超市</option>
<option>银行</option>
</select>
<input type="button" value="搜索" id="btnSearch" onclick="doSearchPlace()" />
</div> </div>
<div class="clear"></div>
<div class="mainbox">
<div class="boxmap" id="container"></div>
<div id="results" style="font-size:13px;margin-top:10px;"></div>
<div id="hospitalresults" style="font-size:13px;margin-top:10px;"></div> </div> </body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container"); // 创建Map实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, ); // 初始化地图,设置中心点坐标和地图级别。
map.enableScrollWheelZoom(); // 启用滚轮放大缩小。
map.enableKeyboard(); // 启用键盘操作。
map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件 var searchresult;
var local = new BMap.LocalSearch(map, {
renderOptions: {
map: map,
panel: "results"
},
onSearchComplete: function (results) {
// 判断状态是否正确
if (local.getStatus() == BMAP_STATUS_SUCCESS) searchresult = results;
else searchresult = null;
}
});
var searchresult2;
var local2 = new BMap.LocalSearch(map, {
renderOptions:
{
map: map,
panel: "hospitalresults"
},
onSearchComplete: function (results) {
// 判断状态是否正确
if (local.getStatus() == BMAP_STATUS_SUCCESS) searchresult2 = results;
else searchresult2 = null;
}
});
function doSearchPlace() {
if (local.getResults() != null)
local.clearResults();
if (local2.getResults() != null)
local2.clearResults();
map.clearOverlays();
var destination = document.getElementById("searchPlace").value;
local.search(destination);
local.setResultsHtmlSetCallback(function () {//加载完结果面板后调用
if (searchresult == null) return false;
var controls = document.getElementsByTagName("li");
for (var i = ; i < controls.length; i++) {
var spans = controls[i].getElementsByTagName("span");
var arr = new Array();
var p = searchresult.getPoi(i);
if (p == null) continue;
arr[] = searchresult.getPoi(i).point.lng;
arr[] = searchresult.getPoi(i).point.lat;
spans[].onclick = function () {
map.clearOverlays(); point.lng = arr[];
point.lat = arr[]; var circle = new BMap.Circle(point, , { strokeWeight: , fillOpacity: 0.5 });
map.addOverlay(circle); var around = document.getElementById("aroundType");
var bounds = getSquareBounds(circle.getCenter(), circle.getRadius());
local2.searchInBounds(around[around.selectedIndex].text, bounds);
};
}
});
}
/**
* 得到圆的内接正方形bounds
* @param {Point} centerPoi 圆形范围的圆心
* @param {Number} r 圆形范围的半径
* @return 无返回值
*/
function getSquareBounds(centerPoi, r) {
var a = Math.sqrt() * r; //正方形边长 mPoi = getMecator(centerPoi);
var x0 = mPoi.x, y0 = mPoi.y; var x1 = x0 + a / , y1 = y0 + a / ; //东北点
var x2 = x0 - a / , y2 = y0 - a / ; //西南点 var ne = getPoi(new BMap.Pixel(x1, y1)), sw = getPoi(new BMap.Pixel(x2, y2));
return new BMap.Bounds(sw, ne); }
//根据球面坐标获得平面坐标。
function getMecator(poi) {
return map.getMapType().getProjection().lngLatToPoint(poi);
}
//根据平面坐标获得球面坐标。
function getPoi(mecator) {
return map.getMapType().getProjection().pointToLngLat(mecator);
} </script>
百度地图API的调用的更多相关文章
- vue中百度地图API的调用
1.使用百度地图api需要使用jsonp,来获取百度api的返回,因为vue不自带jsonp所以需要下载 安装jsonp npm i vue-jsonp -S 引入jsop import Vue fr ...
- 如何在网页中调用百度地图api
我想在木有提供地图接口的年代,前端工程师门要么只写上企业的具体地址,要么就是用一张标有自己位置的地图图片.但是现在不一样啦!为了增强用户体验,谷歌,甚至百度都很开放了,你可以在他们的网站上找到地图接口 ...
- 在XAF(ASP.NET)中以ListEditor的形式调用百度地图API
因为项目需要,在系统中使用地图显示设备的地理位置.考虑过ArgGIS,Bing和Baidu地图.本来想用ArgGIS,看教程嫌麻烦.所以还是用Web地图吧.Bing的话还要申请个key,没心情.百度地 ...
- 调用百度地图Api实现的查看地图功能的小插件
1. 功能 bMap.js 可根据地理位置调用出百度地图,采用弹出框形式 2.用法 var city = '青岛市'; var address = '香港中路'; bMap.init({ city : ...
- 百度地图API调用实例之地址标注与位置显示
之前弄了个谷歌地图API标注的调用实例,后来要求改成百度地图. 感谢主,通过网上资料(百度地图API,百度地图API详解之地图标注)收集及研究, 终于把百度地图标注和显示功能实现出来了,具体实现方法如 ...
- 【c#】Form调用百度地图api攻略及常见问题
首先,在Form中调用百度地图api,我们需要使用webbrowser控件,这个在前面的文章中已经讲过了,可以参照(http://blog.csdn.net/buptgshengod/article/ ...
- 【百度地图API】当地址解析失败时，如何调用search方法查找地址
原文:[百度地图API]当地址解析失败时,如何调用search方法查找地址 有个朋友问我,当地址解析失败时,应该如何处理呢?比如,他想搜索“南宁市青秀区”. --------------------- ...
- HTML 百度地图API调用示例源码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- HTML5调用百度地图API获取当前位置并直接导航目的地的方法
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <meta charset="UTF-8&quo ...
随机推荐
- 前端encodeURIComponent 和后端http_build_query配合
解决特殊字符不能转义 1. function fixedEncodeURIComponent (str) { return encodeURIComponent(str).replace(/[!' ...
- Have Fun with Numbers (大数)
Notice that the number 123456789 is a 9-digit number consisting exactly the numbers from 1 to 9, wit ...
- JavaScript技巧45招
原文:45 Useful JavaScript Tips, Tricks and Best Practices作者:Saad Mousliki 在这篇文章里,我将分享一些JavaScript的技巧.秘 ...
- 九、mysql触发器的概念
.所谓触发器,就是指设置好某个表的某个操作(insert ,update ,delete)时候,同时触发的一个操作: 一般用来,比如说删除文章主栏目,那么可以利用触发器删除这个文章栏目下的所有文章 . ...
- 【cheerio】nodejs的抓取页面模块
http://baike.baidu.com/link?url=8V1CZsEzNE05ujOzISquom_pvFj16sWu1rRb8js11pmd9HNq7ePW_aKfG9oyXj6Txuu5 ...
- Js 获取当前时间
Js获取当前日期时间及其它操作 var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整 ...
- TWaver3D入门探索——3D拓扑图之绽放的小球花
这样一簇绚烂丰满艳丽多姿的3D小球花,要多少代码才能完成?其实不足百行,您信吗?下面咱就看一下具体实现过程,让您分分钟学会用TWaver HTML5制作3D拓扑图. 搭建3D空间 首先为花簇的绽放建一 ...
- Delphi XE5 android openurl(转)
直接上代码: unit OpenViewUrl; interface // URLEncode is performed on the URL// so you need to format it p ...
- 1063: [Noi2008]道路设计 - BZOJ
Description Z 国坐落于遥远而又神奇的东方半岛上,在小Z 的统治时代公路成为这里主要的交通手段.Z 国共有n 座城市,一些城市之间由双向的公路所连接.非常神奇的是Z 国的每个城市所处的经度 ...
- 1058: [ZJOI2007]报表统计 - BZOJ
Description 小Q的妈妈是一个出纳,经常需要做一些统计报表的工作.今天是妈妈的生日,小Q希望可以帮妈妈分担一些工作,作为她的生日礼物之一.经过仔细观察,小Q发现统计一张报表实际上是维护一个非 ...