<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>百度地图API</title>

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

 </head>

 <style>

     #allmap{

         width: 400px;

         height: 400px;

     }

 </style>

 <body>

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

     <p class="msg"></p>

 </body>

 <script type="text/javascript">

     // 百度地图API功能

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

     map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

     function showInfo(e){

         document.querySelector('.msg').innerHTML='经纬度坐标:'+e.point.lng + ', '+ e.point.lat;

     }

     map.addEventListener("click",showInfo,false);

 </script>

 </html>
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>高德地图API</title>

     <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值"></script>

 </head>

 <body>

     <div id="container" style="width:500px; height:300px"></div>

 </body>

 <script>

     function init(){

         var map = new AMap.Map('container', {

             center: [117.000923, 36.675807],

             zoom: 6

         });

         map.plugin(["AMap.ToolBar"], function() {

             map.addControl(new AMap.ToolBar());

         });

     }

     init()

 </script>

 </html>

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>百度API</title><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=YzFULtBs2F38a25gkfG2hreC"></script></head><style>#allmap{width: 400px;height: 400px;}</style><body><div id="allmap"></div><p class="msg"></p></body><script type="text/javascript">// 百度地图API功能var map = new BMap.Map("allmap");map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);function showInfo(e){document.querySelector('.msg').innerHTML='经纬度坐标:'+e.point.lng + ', '+ e.point.lat;}map.addEventListener("click",showInfo,false);</script></html>

地图api的更多相关文章

  1. 高德地图api实现地址和经纬度的转换(python)

    利用高德地图web服务api实现地理/逆地址编码 api使用具体方法请查看官方文档 文档网址:http://lbs.amap.com/api/webservice/guide/api/georegeo ...

  2. 百度地图API的使用

    ------------------自说自话----------------------------- 好奇怪,习惯性使用有道云笔记记录心得与知识后就很少用博客园来记录了. 但是后来想想,有些东西还是 ...

  3. 吐槽贴：百度地图 api 封装 的实用功能 [源码下载]

    ZMap 类 功能介绍 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐 ...

  4. 百度地图API 批量添加 带检索功能的信息窗口

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. C#调用百度地图 api

    转  http://blog.csdn.net/kkkkkxiaofei/article/details/8663377 这一篇,记录一下我调用的地图API实现的功能.下面介绍的都是一些片段的节选,不 ...

  6. 百度地图api的覆盖物样式与bootstrap样式冲突解决办法

    使用百度地图api 和 bootstrap ,发现标注样式出现了问题 label左侧 宽度变得非常窄 正常情况下应该是下面这样的: 原因是boostrap样式和百度地图样式冲突了. 解决办法: .ba ...

  7. 百度地图API试用--(初次尝试)

    2016-03-17: 百度地图API申请key的步骤相对简单,不做过多阐述. 初次使用百度地图API感觉有点神奇,有些功能加进来以后有点问题,注释掉等有空再解决. 代码如下: <%@ page ...

  8. 百度地图API显示多个标注点并添加百度样式检索窗口

    原作者博客地址:http://blog.csdn.net/a497785609/article/details/24009031 在此基础上进行了修改: 1.添加闭包,将i传入内部 2.添加地图和卫星 ...

  9. Google 地图 API V3 使用入门

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  10. Google 地图 API V3 针对移动设备进行开发

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

随机推荐

  1. EOS使用

    公司要玩区块链,听说EOS交易快,就弄来玩玩.弄了一天终于编译成功了. Scanning dependencies of target nodeos [%] Building CXX object p ...

  2. python 实现树结构

    简述: 研究  MCTS 过程中, 需要用到树结构.  baidu  google 了一番, 找不到自己能满足自己的库或代码参考,只好再造个轮子出来 我造的树用来下五子棋 和 围棋用的,   有其它不 ...

  3. fly.js抛物线连续不断加入购物车

    http://yanshi.sucaihuo.com/jquery/2/298/demo/

  4. Sql server数据库连接Oracle库的步骤

    本地使用环境 操作系统: win10 64  ,SQL Server 2012 ,Oracle  Server 11g 第一步:安装好oracle客户端,并配置好TNS信息 ORCL = (DESCR ...

  5. debug makefile 及 lint 软件质量软件

    make -d should give you more than enough information to debug your makefile. Be warned: it will take ...

  6. HttpsessionListener 实现在线人数统计

    最近在学servlet jsp,用的林信良先生的 jsp&servlet 这本书,在第五章有道在线人数统计的课后题完成,做一次记录. 实际效果: 一:用户类: package cc.openh ...

  7. 远程连接Linux

    远程连接Linux   为什么要远程连接Linux 在实际的工作场景中,虚拟机界面或者物理服务器本地的终端都是很少接触的,因为服务器装完系统之后,都要拉倒IDC机房托管,如果是购买的云主机,那更碰不到 ...

  8. firewall-cmd.man

    FIREWALL-CMD(1) firewall-cmd FIREWALL-CMD(1) NAME firewall-cmd - firewalld command line client SYNOP ...

  9. Android开发 ---xml构建选项菜单、上下文菜单(长按显示菜单)、发通知、发送下载通知

    1.activity_main.xml 描述: 定义了一个TextView和三个按钮 <?xml version="1.0" encoding="utf-8&quo ...

  10. SQL JOIN语法，以及JOIN where 和and区别，还有where和join效率问题。

    语法 join 用于根据两个或多个表中的列之间的关系,从这些表中查询数据. Join 和 Key 有时为了得到完整的结果,我们需要从两个或更多的表中获取结果.我们就需要执行 join. 数据库中的表可 ...