js怎么用地图数据实现百度地图效果

JavaScript027

js怎么用地图数据实现百度地图效果,第1张

如何在页面中调用百度地图，直接在你想要插入的页面上调用百度地图代码即可百度地图调用API地址：1.设置定位中心：直接搜索你要找的位置即可。调用百度地图代码2.设置地图：设置地图样式，如大小，显示，功能等。3.添加标注：添加你要标注的地方，自定义坐标位置4.获取代码：点击获取代码即可，在你要插入百度地图的地方出入百度地图代码只要插入部分的代码就行。

<!DOCTYPE html>

 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里面。

接下来要实现这个效果，就是点击的时候给个选中的状态

我是这样写的，先创建个空数组，然后再创建一个覆盖点的实例，这个实例就是最红的那个覆盖点，然后将这个点添加到地图中，这样的话，新的点会覆盖原来位置的那个点

记住每次调用这个点击事件的话，一定要先清楚之前的覆盖点，然后数组一定要初始化一下，要不然就会出现这种情况

谢谢观看！