o2o地图功能

1.引用百度地图<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的秘钥"></script>

2.链接】登录百度帐号

http://lbsyun.baidu.com/apiconsole/key?application=key

点进去登陆后就可以创建了

拿到key以后就是初始化地图了

如果你不需要那个地图

可以不初始化

但是这句：var map = new BMap.Map("allmap"); // 创建Map实例

实例化是必备的

因为map对象后面搜索要用到

3.

4.

看见这里了吗

这就是自动完成的input元素

是一个id

也就是说，绑定了这个input，后期输入内容就会传递到百度检索了

这些div容器你需要先写好

看见这里了吗

这就是自动完成的input元素

是一个id

也就是说，绑定了这个input，后期输入内容就会传递到百度检索了

这些div容器你需要先写好

看见这里了吗

这就是自动完成的input元素

是一个id

也就是说，绑定了这个input，后期输入内容就会传递到百度检索了

这些div容器你需要先写好

然后就是提示列表被点击的事件了

默认的话列表被点击会把li的内容放到input去

如果你想要额外的操作

ac.addEventListener("onconfirm", function (e) {

}

需要将事件写到这个function里面去

这个e代表的是地图的参数

ac变量就是在这里得到的

它属于地图的扩展搜索功能

ac就是创建的自动完成input的实例对象

简单的说可以理解为ul。。

然后给他监听事件

6.

这个是范围检索

商家的类型不一样

比如以你为中心

取出半径500米的商家列表

得到后列入到坐标获取基本信息

点击后传入经纬度到右边的容器改变信息内容

原理是差不多的

有个key就可以了

【链接】构造函数

http://developer.baidu.com/map/reference/

这里有手册

地图的样式是可以覆盖的