枫叶博客,一个专注于分享自己学习和工作中的心得体会,欢迎大家光临!

高德地图javascript版本api实现定点标注公交查询

网站技术 枫叶博客 26℃ 0评论

有时候在做公司网站的时候需要展示公司的联系方式和地点等。传统的方式是留下电话,邮箱,QQ,地址等。下面博主介绍一种更加直观方便的展示方式。

该方法利用高德地图推出的免费api来做接口。要点如下:

一:首先引入接口文件。

<link rel="stylesheet" href="http://api.amap.com/Public/Css/demo.Default.css" type="text/css" /> 
<script language="javascript" src="http://api.amap.com/webapi/init?v=1.1"></script>

二:对位置中心定位。

function mapInit() {

var opt = {

level : 17, //设置地图缩放级别

center : new AMap.LngLat(104.04297888,30.6836646), //设置地图中心点

doubleClickZoom : true, //双击放大地图

scrollWheel : true//鼠标滚轮缩放地图

}

三:设置气泡显示信息。

var info = [];

info.push("<b>成都恒博医院</b>");

        info.push("电话 : 028-87712345   邮编 : 611745");

info.push("地址 : 成都市营门口路50号");

四:在html中使用。

 

<body onload="mapInit();">

   <center>

<table width="661px"  border="0" cellpadding="0" cellspacing="0">

<tr>

<td><div id="iCenter" style="height:400px; border:#CCCCCC 2px solid; width:461px"> </div></td>

                <td width="300"><div style="padding:2px 0px 0px 5px;font-size:12px; width:400px;">

<div style="line-height:30px;">

<b>从:</b>

<input type="hidden" id="city" name="city" value="028" />

<input type="text" id="keyword" name="keyword" value="成都恒博医院"/></br/>

<b>到:</b>

<input type="text" id="keyword1" name="keyword1" value="万达广场"/>

<input type="button" value="查询" onclick="keywordSearch()"/>

<div style="padding:0px 0 4px 2px; background-color:#D1EEEE">

<b>查询结果:</b>

</div><div id="result" name="result" style="overflow:auto;margin-top:5px;width:401px;height:255px"> </div></div></td>

</tr>

</table>

        </center>

</body>

 演示地址如需下载将html保存报本地:http://www.qyuef.com/map.html

转载请注明:枫叶博客 » 高德地图javascript版本api实现定点标注公交查询

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(6)个小伙伴在吐槽
  1. 博主讲的很到位,可惜难得才更新文章,如果是苏州的朋友,可以见面互相交流一番。
    苏州家倍得2012-11-13 14:36 回复
  2. 很久没来了,今天过来看看!
    www.qdjgwzhs.com2012-11-13 19:36 回复
  3. 很久没来了,今天过来看看!
  4. 路过.留个评论.
    www.whjwybz.com2012-11-14 23:37 回复
  5. 高德竟然还有js的版本啊
    Leniy2012-11-22 13:53 回复
  6. 学习了!
    lene2015-10-23 15:01 回复