<!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. vue 数组push元素 视图没更新

    Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sort() reverse() 问题描 ...

  2. 【sparkSQL】SparkSession的认识

    https://www.cnblogs.com/zzhangyuhang/p/9039695.html https://www.jianshu.com/p/dea6a78b9dff 在Spark1.6 ...

  3. lumion的基本操作，天气系统，景观系统。5.25

    1.打开场景,按住鼠标右键可以选择方向. 2.向前移动:W,向后移动S,亦可以用鼠标滚轮向前或者向后滚.向左A向右D, 3.Q提升视角,E下降视角. 4.鼠标滚轮点下去,进行提升和下降视角.左右移动, ...

  4. UDP协议学习(转)

    reference: https://blog.csdn.net/s_lisheng/article/details/73538229                  https://blog.cs ...

  5. kafka consumer重复消费问题

    在做分布式编译的时候,每一个worker都有一个consumer,适用的kafka+zookeep的配置都是默认的配置,在消息比较少的情况下,每一个consumer都能均匀得到互不相同的消息,但是当消 ...

  6. python发送邮箱的小项目

    import smtplibfrom email.mime.text import MIMEText receiver = input('输入接受者邮箱\n')subject = input('输入标 ...

  7. 运维grep语法

    grep的语法和用法 grep命令的格式: grep   [options]   PATTERN  [FILE] 其中:1,pattern是用正则表达式书写的模式.2,FILE是要查找的文件,可以是用 ...

  8. 1.oracle之表管理sql

    /*数据类型1. number(M,N)   整数位和小数位最多是M,其中小数位为N位2. char(M):定长字符串,长度为M,如果插入数据时长度小于M,则在末尾补上空格3. varchar2(M) ...

  9. Linux系统下用find命令查找最近修改过的文件

    1.先进入指定目录,比如:cd /var/ftp/ss 2.输入指定命令,相关命令如下介绍: 最近24小时内修改过的文件 find ./ -mtime 0 前48~24小时修改过的文件 find ./ ...

  10. JavaStudy——Java之自动拆箱与自动装箱

    java基本类型介绍 java中,基本数据类型一共有8种,详细信息如下表: 类型 大小 范围 默认值 byte 8 -128 - 127 0 short 16 -32768 - 32768 0 int ...