2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 ol, ul {
8 list-style: none
9 }
10 li {
11 float:left
12 margin:0 10px
13 }
14 ol li {
15 cursor:pointer
16 padding:1px 5px
17 background:#eee
18 border:1px solid #ccc
19 }
20 ol li.on {
21 background:#f00
22 color:#fff
23 border-color:#f00
24 }
25 span {
26 color:#f00
27 }
28 </style>
29 </head>
30 <body>
31 <ul id="data">
32 <li>
33 <img src="1.jpg" alt="服饰 —— 服装模板" />
34 <h2>服饰 —— 服装模板<span>NO.A001</span></h2>
35 </li>
36 <li>
37 <img src="1.jpg" alt="服饰 —— 服装模板" />
38 <h2>服饰 —— 服装模板<span>NO.A001</span></h2>
39 </li>
40 </ul>
41 <div style="clear:both"></div>
42 <ol id="page">
43 <li>1</li>
44 <li>2</li>
45 </ol>
46
47 <script src="data.js"></script>
48 </body>
49 </html>
最近公司要写一个找公厕的项目，基本的要求就是将用户周围1000米之内所有公厕都展示到地图上，并且点击公厕的时候要地图要移至到公厕的中心位置，还有搜索到的公厕也要移至到地图中心位置；
项目一启动，我就第一时间选择了高德地图，不要问为啥不选择百度地图，对于百度地图的表现我表示，累了；
基本上将根本高德地图的开发文档，建立个地图，然后将点标识在地图上
后端返回的数据类型是数组，所以我这里进行了一下for循环，将每个对象都创建一个覆盖点，然后将创建的点的实例都放到一个数组markerList里面。
接下来要实现这个效果，就是点击的时候给个选中的状态
我是这样写的，先创建个空数组，然后再创建一个覆盖点的实例，这个实例就是最红的那个覆盖点，然后将这个点添加到地图中，这样的话，新的点会覆盖原来位置的那个点
记住每次调用这个点击事件的话，一定要先清楚之前的覆盖点，然后数组一定要初始化一下，要不然就会出现这种情况
谢谢观看！
