欢迎光临
我们一直在努力

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

有时候在做公司网站的时候需要展示公司的联系方式和地点等。传统的方式是留下电话,邮箱,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

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:枫叶博客 » 高德地图javascript版本api实现定点标注公交查询

分享到: 生成海报
avatar

热门文章

  • 评论 6

    Captcha Code

    • QQ号
    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址
    1. #1
      avatar

      博主讲的很到位,可惜难得才更新文章,如果是苏州的朋友,可以见面互相交流一番。

      苏州家倍得12年前 (2012-11-13)国内网友回复
    2. #2
      avatar

      很久没来了,今天过来看看!

      www.qdjgwzhs.com12年前 (2012-11-13)国内网友回复
    3. #3
      avatar

      很久没来了,今天过来看看!

      www.qichezhifeng.com12年前 (2012-11-14)国内网友回复
    4. #4
      avatar

      路过.留个评论.

      www.whjwybz.com12年前 (2012-11-14)国内网友回复
    5. #5
      avatar

      高德竟然还有js的版本啊

      Leniy12年前 (2012-11-22)国内网友回复
    6. #6
      avatar

      学习了!

      lene9年前 (2015-10-23)国内网友回复

    枫叶博客

    联系我们联系我们

    登录

    忘记密码 ?