javascript调用百度地图，以及城市的初始化
时间: 19:56
作者:泡在网上的日子
摘要 地图的构建非常简单，官方的API文档也写得很清晰，我只做一总结： 一、引入JS ：这个很容易理解，既然是调用JS版的百度地图，肯定得引用外部的JS文件了，而这个文件来自百度的服务器（所以必须得联网，不然就没戏。。），我们以后用到的所有方法都写在这个JS
地图的构建非常简单，官方的API文档也写得很清晰，我只做一总结：一、引入JS：这个很容易理解，既然是调用JS版的百度地图，肯定得引用外部的JS文件了，而这个文件来自百度的服务器（所以必须得联网，不然就没戏。。），我们以后用到的所有方法都写在这个JS文件当中。&script type="text/javascript" src="http://api./api?v=1.4"&&/script&这里的1.4为JS版百度地图的版本号，目前最新版本为1.4。（理论上这条语句是可以放在html文件中的任何位置，但是一般人们都放在&/head&标签之前，不过我曾看到一本书上说放在&/body&前，效率是最高的。）二、在你的html文件中新建一个&div&容器：添加一个id属性（这里为&div id=&container&&&/div&）。这个容器是用来放置百度地图的，地图的大小可以通过调节div的样式实现。三、新建一个百度地图&script type="text/javascript"&
var map = new BMap.Map("container"); // 创建地图实例；（"container"）就是刚才新建的div的id属性值
var point = new BMap.Point(116.404, 39.915); // 创建点坐标；这个点是由经度和纬度构成的，点可以随意选取
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
//map.centerAndZoom("杭州");//这条语句可以代替上面那一条，系统会自动定位到该城市，城市名可以根据用户需要自己定//当然，如果这样子写，那就不需新建point点了
&/script&只要这三步，就可以建立一个百度地图web应用。当然，还需要调节样式之类的。下面是一个完整的HTML文件：（该例子来自百度官网）&!DOCTYPE html&&!--HTML5--&
&meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&Hello, World&/title&
&style type="text/css"&
html{height:100%}
body{height:100%;margin:0padding:0px}
#container{height:100%}
&script type="text/javascript" src="http://api./api?v=1.3"&&/script&
&div id="container"&&/div&
&script type="text/javascript"&
var map = new BMap.Map("container"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
&/html&要想让容器里展示地图还需要给API提供两个东西：地理位置和展示级别。地理位置就是告诉API显示哪里的地图，在北京还是在上海？还是在广州？地理位置是通过经纬度来描述的，百度地图也如此。展示级别告诉API以多大的比例显示地图。在初中地理课上学过，地图是有比例尺的，比例尺通常会告诉地图上一厘米代表实际多少公里。地图API也如此，但是它是以像素作为基准的，不同的级别下每个像素所代表的米数是不同的，级别越高每像素等于的米数就越少，反之则越大。视觉上看就是级别越高地图越详细。目前百度地图支持的级别范围是1到19，在19级下，地图上一个像素表示0.5米（注：目前1.2版本支持到19级，1.1及以前版本支持到18级）。下面代码提供一个经纬度和一个级别，进行地图初始化：map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);东经116.404度，北纬39.915度大约是在天安门的位置，当然经纬度后面的位数越多越能精确的表示一个点，级别给11，现在会在浏览器看到这个效果：方法centerAndZoom接收到一个坐标和一个级别后就开始进行相应的计算，接着会根据计算结果获取相应的图块，最终显示在浏览器中。至此，地图初始化才全部完成。如果你不知道北京的经纬度信息怎么办？1.2版本的API有个更方便的功能：通过城市名称进行地图初始化。map.centerAndZoom('北京');此时API会根据你提供城市名来查找其中心位置，并根据容器大小来决定级别，保证城市中心区域都能显示在视野中，假如我们不改变容器大小使用上述方式来初始化地图，你将得到和之前一致的结果，但如果你把容器宽高改为300x200，则会得到以下效果：我们看到中心没有变但是级别发生了变化，因为容器变小了，这是为了保证能够在视野范围内展示北京市中心区域。通过这种方式初始化地图的好处就是你不必知道经纬度、级别这些概念就能让API开始显示地图，API这么做也是最大限度降低开发者的使用成本。当然，任何事物都有两面性（仿佛是政治课的内容），这种方式初始化有两个问题：首先，初始化过程是异步的，你不能立刻在centerAndZoom代码之后获取地图状态（比如中心点、视野范围等），而需要通过监听地图load事件来进行后续的操作，第二，初始化过程会比前者稍慢，因为此时会有网络请求，请求返回之后才能确定地图中心和级别。比如你只能通过如下方式获取地图中心点：map.addEventListener('load', function(){
&alert(map.getCenter().lng + ', ' + map.getCenter().lat);
map.centerAndZoom('上海');Map类提供了isLoaded方法，通过它就能知道地图是否加载完成，我们可以来看看在两种不同的初始化方式中调用此方法的结果如何：map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
alert(map.isLoaded()); // true如果用城市名这种方式，你会发现centerAndZoom方法执行完成后地图并没有初始化完成：map.centerAndZoom('上海');
alert(map.isLoaded()); // false
上一篇： 上面是亚马逊网站的下拉导航菜单，类似于天猫和京东商城。 鼠标移上去的效果反应非常迅速，事实上做过这种效果的人都应该知道，一般要做到如此快速的效果，当你从左侧移到右侧的时候是会出问题的。大多数dropdown菜单在鼠标移到菜单项并显示子菜单的时候，都
下一篇： 介绍 DOM是Document Object Modeule的缩写，一般来说，DOM操作分成3个方面。 1、DOM Core DOM Core并不专属于javascript，任何一种支持DOM的程序设计语言都可以使用它，用途也远不止仅限于网页，也可以用来处理任何一种使用标记语言编写出来的文档，如XML。非常抱歉！您所访问的页面不存在或者已迁移!
您可以返回：8243人阅读
&&& 这一篇我将跟大家分享一下我自己在开发过程中总结出的一些操作地图的方法，属性，及思路，希望可以让大家少走弯路。
<span style="font-size:18 color:#.定位
一般百度的示例DEMO里开始初始化地图时用的都是map.centerAndZoom（坐标，放大级数）；其中坐标可以用点代替，也可用字符串代替，而放大级数必须是整数，比如：
var p1=new BMap.Point(108..238296);//西安坐标
map.centerAndZoom(p1,15);//或者map.centerAndZoom(&西安&,15);
但是必须要注意一点，这个点绝对是要用百度的API去实例化，即必须用BMap.Point(经度，纬度)去创造一个点，我在这点上吃了很多苦，有一次直接建立了一个坐标数组就在那读，死活没调通。
如果要重新定位，我建议大家不要在用centerAndZoom了，可以这样：
map.setCenter(“西安&);&&
map.setZoom(15);&
<span style="font-size:18 color:#.添加标注(Marker)
添加标注的最基本条件就是添加点坐标，示例如下：
首先必须要加载地图（所有的操作都是在这个的基础上进行的）
var map = new BMap.Map(&allmap&);
map.centerAndZoom(new BMap.Point(108..238296), 14);
var marker1 = new BMap.Marker(new BMap.Point(108..238296));& // 创建标注
map.addOverlay(marker1);&&&&&&&&&&&&& // 将标注添加到地图中
若要给标注添加信息框，则继续下面的代码：
var infoWindow1 = Window(&普通标注&);
//给mark添加鼠标单击事件
marker1.addEventListener(&click&, function(){this.openInfoWindow(infoWindow1);});
百度默认的标注是个红色气球，可以给它换图标：
var pt = new BMap.Point(116.417, 39.909);
var myIcon = new BMap.Icon(&./png.gif&, new BMap.Size(300,157));//自己要添加的路径
var marker2 = new BMap.Marker(pt,{icon:myIcon});& // 创建标注
map.addOverlay(marker2);&&&&&&&&&&&&& // 将标注添加到地图中
最后为信息框加入点击鼠标事件：
var infoWindow2 = Window(&&p style='font-size:14'&哈哈，你看见我啦！我可不常出现哦！&/p&&p style='font-size:14'&赶快查看源代码，看看我是如何添加上来的！&/p&&);
marker2.addEventListener(&click&, function(){this.openInfoWindow(infoWindow2);});
<span style="font-size:18 color:#.画线
下面是百度的一个小DEMO：
&script type=&text/javascript&&
var map = new BMap.Map(&allmap&);
map.centerAndZoom(&重庆&,12);&&&&&&&&&&&&&&&&&& // 初始化地图,设置城市和地图级别。
var pointA = new BMap.Point(106..490295);& // 创建点坐标A--大渡口区
var pointB = new BMap.Point(106..615467);& // 创建点坐标B--江北区
alert('从大渡口区到江北区的距离是：'&#43;map.getDistance(pointA,pointB)&#43;' 米。');//获取2点距离
var polyline = new BMap.Polyline([pointA,pointB], {strokeColor:&blue&, strokeWeight:6, strokeOpacity:0.5});& //定义折线
map.addOverlay(polyline);&& //添加折线到地图上
从以上代码中可以得到两个重要的信息：
(1)& map.getDistance(点1，点2)；这个函数可以很好的帮助我们算两点的距离，不用自己计算，很方便。
(2)& Ployline函数可以帮助我们划线，在这里不难看出它需要的第一个参数是一个点数组，所以在实际项目中可以将数据先放在数组里，然后在传数组名给它即可(注意一定要实例化，即BMap.Point());所以可以利用它来画矩形，多边形等等。。
<span style="font-size:18 color:#.地址解析
function BMap_Geo(detail_address,city)
&& var myGeo=new BMap.Geocoder();
&& myGeo.getPoint(detai_address,
&& function(point)
&& if(point)
&&&&& map.panTo(point);
&&&&& map.addOverlay(new BMap.Marker(point));&&
& },city)&&
<span style="font-size:18 color:#.鼠标实时获取坐标
function GetlngAndlat(e)
{if(e.point.lng!=null)
& document.getElementById(&mouselng&).innerHTML=e.point.
& document.getElementById(&mouselat&).innerHTML=e.point.
这些全部都是静态页面的脚本，为了更好的实现，我选择用WINFORM与其交互。下一篇继续。
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：130654次
积分：2097
积分：2097
排名：第7342名
原创：80篇
评论：94条
(4)(4)(1)(2)(3)(5)(5)(1)(7)(2)(6)(1)(4)(5)(11)(4)(2)(7)(6)(3)关于调用百度地图api的_Java123社区微信号：java123msg |||[][]当前位置: &
& 关于调用百度地图api的之前弄过google地图的api的，百度的也差不多。要把地址转化为经纬度，然后通过经纬度定位。google的api里有个 GClientGeocoder类有个方法geocoder.getLatLng(address,callback); 但是百度地图api里的这之前弄过google地图的api的，百度的也差不多。要把地址转化为经纬度，然后通过经纬度定位。google的api里有个GClientGeocoder&类&有个方法geocoder.getLatLng(address,callback);但是百度地图api里的这个方法&geo.getPoint(address,&callback,&city);&&还要个city城市参数，烦人不，难道我截取地址的前几位作为城市名？大家用百度地图api，有什么好的方法？更准确点的有些地址是前面没有才城市名的，比如中国人民解放军第三医院&那就扯了。。。BMap.LocalSearch（）也要城市名，百度api就没有不要城市名的准确的把地名转化为经纬度的？一般房产或者旅游网站的&地图&根据地名设置中心点，给的地名也不一定有城市名吧，哪位知道是如何处理的。百度知道有提问，知道的去拿分啊！/question/.html
顶一下(0)0%踩一下(0)0%------分隔线------上一篇： 下一篇： 栏目列表推荐内容GifShot 是一个可以创建流媒体，视频或图像的 GIF 动画的 JavaScr...
---------------------------------------------------------------------------------...
《javascript语言精粹》是一本很棒的书籍，其中作者在附录列出了...
1 /* * 2 *name： 自定义仿console.log 3 *function： 深度输出对象数据...
一、安装Spket 第一种方法：网上更新方式 1.插件首页：http://ww...
摘要： ? 由于javascript语言的特殊性导致它有很多特殊的条件判断...