文档章节

百度地图的使用

素人派
 素人派
发布于 2016/12/31 20:45
字数 562
阅读 45
收藏 0
  • 介绍
本文介绍了百度地图的使用方法。 1、在页面加载时优先加载百度地图的js,因为此文件比较大,加载速度慢,所以优先加载 [codesyntax lang="javascript"]
function loadScript(){
	var scriptDom=document.createElement("script");
	scriptDom.src="http://api.map.baidu.com/api?v=1.3&callback=initialize";
	document.body.appendChild(scriptDom);
}
window.onload=loadScript;
[/codesyntax]   2、创建百度地图 [codesyntax lang="javascript"]
//创建和初始化地图函数:
function initialize(){
	createMap();//创建地图
	setMapEvent();//设置地图事件
	addMapControl();//向地图添加控件
}
/**
* 搜索
*/
function search(){
	var cityValue = $("#txtSearch").val();
	var city = cityValue.toString().replace(/(^\s+)|(\s+$)/g,"");
	
	$("#container").show();
	heightnum = $(document.body).height();
	$('.exoperation').css('height',heightnum);
	
	$('.exoperation').fadeTo(200,0.6);
	$('.company_pos').fadeIn();
	var local = new BMap.LocalSearch(map, {
		renderOptions: {
			map: map,
			panel: "results",
			autoViewport: true,
			selectFirstResult: false
		}
	});
	local.search(city)
}
//创建地图函数:
function createMap(){
	var map = new BMap.Map("container");//在百度地图容器中创建一个地图
	var point = new BMap.Point(110.457917,35.944982);//定义一个中心点坐标
	map.centerAndZoom(point,14);//设定地图的中心点和坐标并将地图显示在地图容器中
	window.map = map;//将map变量存储在全局
	map.addEventListener("click", function(e){ //点击事件
		if(e.overlay){ //判断是不是覆盖物
			var marker=e.overlay;//得到标注
			var title=marker.getTitle();//得到标注标题
			$("#txtSearch").val($("#txtSearch").val()+"-"+title+"");
			$("#map_hiddenModel").hide();
			$("#map_showModel").hide();
		}
	});
}

//地图事件设置函数:
function setMapEvent(){
	map.enableDragging();//启用地图拖拽事件,默认启用(可不写)
	map.enableScrollWheelZoom();//启用地图滚轮放大缩小
	map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)
	map.enableKeyboard();//启用键盘上下左右键移动地图
}

//地图控件添加函数:
function addMapControl(){
	//向地图中添加缩放控件
	var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT ,type:BMAP_NAVIGATION_CONTROL_SMALL});
	map.addControl(ctrl_nav);
}
[/codesyntax] 3、在jsp中定义输入地址的输入框 [codesyntax lang="html4strict"]
<div class="info_cont_item"><span class="erro" id="mapPlaceMsg" style="display: none;"></span><label>办公地址</label>
<input name="mapPlace" type="text" placeholder="" class="input_text" id="txtSearch" />
</div>
[/codesyntax] 4、定义将查询后的地图展现到弹出框 [codesyntax lang="html4strict"]
<div class="exoperation" id="map_hiddenModel"></div>
<div class="company_pos" id="map_showModel">
<div class="company_pos_title"><a href="javascript:;" class="close" onclick="popclose('.company_pos')">
<img src="images/icon_close1.png" width="32" height="32" alt=""></a>公司地址</div>
<div class="company_pos_cont">
<p></p>
<p>
<div style="width: 476; height: 319px; border: 1px solid gray;" id="container">
<div id="r_result"></div>
</div>
</p>
</div>
</div>
[/codesyntax] 5、触发地图的查询 [codesyntax lang="html4strict"]
<div class="info_cont_item map"><label></label>办公地址将以地图的形式显示给用户 <a href="javascript:search();">查看地图</a></div>
[/codesyntax]

本文转载自:http://surenpi.com/2015/01/15/baidu_map_intro/

素人派
粉丝 26
博文 1907
码字总数 10223
作品 6
东城
程序员
私信 提问

暂无文章

500行代码,教你用python写个微信飞机大战

这几天在重温微信小游戏的飞机大战,玩着玩着就在思考人生了,这飞机大战怎么就可以做的那么好,操作简单,简单上手。 帮助蹲厕族、YP族、饭圈女孩在无聊之余可以有一样东西让他们振作起来!...

上海小胖
今天
8
0
关于AsyncTask的onPostExcute方法是否会在Activity重建过程中调用的问题

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/XG1057415595/article/details/86774575 假设下面一种情况...

shzwork
今天
7
0
object 类中有哪些方法?

getClass(): 获取运行时类的对象 equals():判断其他对象是否与此对象相等 hashcode():返回该对象的哈希码值 toString():返回该对象的字符串表示 clone(): 创建并返此对象的一个副本 wait...

happywe
今天
6
0
Docker容器实战(七) - 容器中进程视野下的文件系统

前两文中,讲了Linux容器最基础的两种技术 Namespace 作用是“隔离”,它让应用进程只能看到该Namespace内的“世界” Cgroups 作用是“限制”,它给这个“世界”围上了一圈看不见的墙 这么一...

JavaEdge
今天
8
0
文件访问和共享的方法介绍

在上一篇文章中,你了解到文件有三个不同的权限集。拥有该文件的用户有一个集合,拥有该文件的组的成员有一个集合,然后最终一个集合适用于其他所有人。在长列表(ls -l)中这些权限使用符号...

老孟的Linux私房菜
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部