<!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. Python多线程基本操作

    多线程类似于同时执行多个不同程序,多线程运行有如下优点: 使用线程可以把占据长时间的程序中的任务放到后台去处理. 用户界面可以更加吸引人,这样比如用户点击了一个按钮去触发某些事件的处理,可以弹出一个进 ...

  2. vue的.vue文件是怎么run起来的(vue-loader)

    vue的.vue文件是怎么run起来的(vue-loader) 引子:vue的.vue文件是怎么跑起来的? 答:通过vue-loader,解析.vue文件,在webpack解析,拆解vue组件 1.v ...

  3. day_7

    r 读w 写a 追加写 f = open('s.txt',mode='r',encoding='utf-8') ff = f.readline() #读取时一行一行的时候末尾会跟着\nprint(ff ...

  4. iOS 在工程内部创建一个静态库target

    当你在开发项目的时候需要把公用的东西打包出来,其他项目方便使用的时候,打包成静态库是你的最优选择,在工程内部开发的时候新建一个target进行静态库的开发可以使你的开发调试更加方便而不是单独新建一个工 ...

  5. [Leetcode 90]求含有重复数的子集 Subset II

    [题目] Given a collection of integers that might contain duplicates, nums, return all possible subsets ...

  6. Rsync,Linux日志及Screen工具介绍

    第十六次课 Rsync,Linux日志及Screen工具介绍 目录 一.rsync工具介绍 二.rsync常用选项 三.rsync通过ssh同步 四. rsync通过服务同步 五.linux系统日志 ...

  7. 5.使用std的迭代器访问并修改图像

    void Test_ColorReduceByIterator() { Mat g_srcImage=imread("D:\\OpenCV Projects\\OpenCV_Test_Ima ...

  8. java特殊抽象类-接口

  9. Tex_Err:缺失wlscirep.cls

    使用期刊模板编译时,需要'.cls'一类格式文件支持.从Overleaf上直接Copy代码到本地,发现自己的tex运行时会报错: ! LaTeX Error: File `wlscirep.cls' ...

  10. 问题 Duplicate entry '0' for key 'PRIMARY'

    今天使用了触发器,在一个表中执行增删改操作,然后在另一个表中执行相应的记录时,出现了这个问题 其实这个问题应该算是细节问题,有两种情况: 1.就是在插入数据的时候将id设置为not nul但是在插入数 ...