原文:

摘要：

　　想亲手制作一张酷讯、去哪儿、安居客、链接地产那样的房产、酒店地图麼？那赶快来学习吧。（以酷讯为例，如下图）

　　

 

更多成功案例请点击：

------------------------------------------------------------------------------------------------------------------------------

准备知识：

0、如何创建一张百度地图？   最简单地图的示例：

1、如何找到百度坐标？    坐标拾取工具: 

2、如何制作自定义覆盖物？  自定义覆盖物示例： 

3、如果填写信息窗口内容？   信息窗口支持html语句：

4、如何打开信息窗口？    方法：openInfoWindow

------------------------------------------------------------------------------------------------------------------------------

教学开始~

 

0、如何创建百度地图？

打开记事本，拷贝以下代码，并把文件保存为htm格式。比如map.htm。然后双击图标运行。。

　　

 

1、如何找到百度坐标？

利用百度提供的坐标拾取工具（网址：）获取10个坐标点。

如下图，我输入“酒店”，在右侧会出现一些酒店的经纬度。也可直接在地图上点击，获取经纬度！

 

 

这样，我获取了10个经纬度，并把它们保存到一个数组里。我把获取的坐标全部罗列出来。

var points = [//10个坐标点 new BMap.Point(116.411776,39.942833), new BMap.Point(116.320791,40.003682), new BMap.Point(116.275186,39.896095), new BMap.Point(116.425098,39.946249), new BMap.Point(116.359823,39.984761), new BMap.Point(116.316479,39.98323), new BMap.Point(116.385986,39.946124), new BMap.Point(116.427545,40.00796), new BMap.Point(116.446965,39.911603), new BMap.Point(116.454579,39.946652)];

　　

利用这些点创建标注，并且打到地图上。为了让大家看得清楚，这里就不使用循环了。如下：

var marker1 =new BMap.Marker(points[1]);  // 创建10个标注 var marker2 =new BMap.Marker(points[2]); var marker3 =new BMap.Marker(points[3]); var marker4 =new BMap.Marker(points[4]); var marker5 =new BMap.Marker(points[5]); var marker6 =new BMap.Marker(points[6]); var marker7 =new BMap.Marker(points[7]); var marker8 =new BMap.Marker(points[8]); var marker9 =new BMap.Marker(points[9]); var marker10 =new BMap.Marker(points[0]); map.addOverlay(marker1);              // 将标注添加到地图中 map.addOverlay(marker2); map.addOverlay(marker3); map.addOverlay(marker4); map.addOverlay(marker5); map.addOverlay(marker6); map.addOverlay(marker7); map.addOverlay(marker8); map.addOverlay(marker9); map.addOverlay(marker10);

　　

 

这里，一定要记得，如何给地图添加了标注，又没有调整到合适的地图视野，那些标注是看不见的。需要调整视野。

map.setViewport(points);         //调整地图的最佳视野为显示标注数组point

　　

2、自定义覆盖物

如果你不满意标注图标，可以自己选择1）改变icon，或者2）自定义覆盖物。

1）改变icon

var myIcon =new BMap.Icon("http://dev.baidu.com/wiki/static/map/API/examples/images/Mario.png", new BMap.Size(32, 70), {    //小车图片 //offset: new BMap.Size(0, -5),    //相当于CSS精灵     imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。   }); var carMk = new BMap.Marker(points[0],{icon:myIcon});  //创建标注 map.addOverlay(carMk);    //添加marker到地图上

　　

2）自定义覆盖物的示例：

 

到现在为止，你的地图会显示成这个样子。记得第一个标注麼？它已经被你设置成超级马里奥了！！

 

3、信息窗口内容

信息窗口里支持任意的htm代码。你可以这样来创建一个信息窗口。记住，要先定义opts，再定义信息窗口。简单的代码如下：

var opts = {
      width : 250,     // 信息窗口宽度   height: 100,     // 信息窗口高度   title : "Hello"// 信息窗口标题 } var infoWindow =new BMap.InfoWindow("World", opts);  // 创建信息窗口对象

 

复杂信息窗口的内容这样写，如下：

var opts1 = {title : '如家快捷酒店'}; var infoWindow1 =new BMap.InfoWindow("
     
      地址:北京市朝阳区高碑店小学旁
      
      电话:010-59921010
      
      口碑：
      
      
      
      
      
      详情>>
     
", opts1);  // 创建信息窗口对象，引号里可以书写任意的html语句。

 

4、打开信息窗口

给标注添加鼠标事件，当鼠标滑过标注的时候，打开信息窗口。

marker.addEventListener("mouseover", function(){
    this.openInfoWindow(infoWindow);});

　　

所以，到现在为止，你的地图应该呈现这样一幅景象。

 

 

 

本案例全部代码如下：

　　

 

 

 

 

-------------------------------------------------------------------------------------------------

附加内容：

如何制作酷讯右边的列表？（今天太晚了，明天早上我过来接着写。）