通过css3对百度地图maker动态扩展

html-css017

通过css3对百度地图maker动态扩展,第1张

以前使用过百度地图，有一些需要对某些特定标记物进行高亮和醒目标记，因此采用css3对百度地图的marker组件进行动态效果调试，以下是简单记录。

效果如下：

效果如下：

效果如下：

var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {

offset: new BMap.Size(10, 25),

imageOffset: new BMap.Size(0, 0 - index * 25)

})

var marker = new BMap.Marker(point, {icon: myIcon})

map.addOverlay(marker)

这是引用百度自己的标注，看明白了没有，这个小标注的字不是加上去的，而本身就是一张图，连在一块的。想自定样式的话可以自己制作并切图，这样考验你的CSS了 ，总之很烦的 。个人觉得直接引用百度的就可以了。

做项目的时候需要用到的功能，一个页面上，左边是各个地点，右边是地图，一开始把所有的点全都标注在地图上，点左边的每个地点后地图移动到以该点为中心，点击地图上的坐标点会显示出相关的信息，

对着百度地图的文档一点一点做出来了，先记下来，以作备用！！！

<pre class="prettyprint lang-html"><!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>百度地图-多个坐标点一起显示</title>

<style type="text/css">

#allmap {width: 100%height: 600pxoverflow: hiddenmargin:0font-family:"微软雅黑"}

</style>

</head>

<body>

<table style="width:100%">

<tr>

<td style="width:250px">

<ul>

<li><a href="javascript:void(0)" onclick="to(116.404,39.915)">水厂1</a></li>

<li><a href="javascript:void(0)" onclick="to(116.383752,39.91334)">水厂2</a></li>

<li><a href="javascript:void(0)" onclick="to(116.384502,39.932241)">水厂3</a></li>

</ul>

</td>

<td>

<div id="allmap"></div>

</td>

</tr>

</table>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=SyRux96r0i0Xue1Qqp0ZPb4uCc8BC6Aw"></script>

<script type="text/javascript">

// 百度地图API功能

var map = new BMap.Map("allmap")

var point = new BMap.Point(116.404, 39.915)

map.centerAndZoom(point, 15)

//移动到某一坐标点

function to(x,y){

map.panTo(new BMap.Point(x,y))

</body>

</html></pre>