<!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. 微服务-开发框架之springboot by 大雄daysn

    目录 一.关于springboot 二.springboot的实践 2.1发布一个rest的api 2.2端点 2.3健康检查 2.4远程监控 一.关于springboot 由来:spring1.0- ...

  2. Mysql 监控脚本

    cat mysql_status_output.py #coding=utf-8import jaydebeapiimport sysimport pymysqlimport osfrom prome ...

  3. git 的安装和使用及hithub同步

    作业要求来自https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/2097 GitHub远程仓库的地址 https://github.com/ ...

  4. L1-058 6翻了

    “666”是一种网络用语,大概是表示某人很厉害.我们很佩服的意思.最近又衍生出另一个数字“9”,意思是“6翻了”,实在太厉害的意思.如果你以为这就是厉害的最高境界,那就错啦 —— 目前的最高境界是数字 ...

  5. svn提示文件 is already locked

    有时候在提交代码或者更新代码的时候svn会报错误,提示请执行"clean up",但是有时候执行"clean up"也没有什么用,不过当执行"clea ...

  6. python IDE PyCharm的安装

    首先去Pycharm官网,或者直接输入网址:http://www.jetbrains.com/pycharm/download  : 选择Windows系统 免费版本下载: 双击下载的安装包,进行安装 ...

  7. 数据库编程加入transaction

    TransManager tm = new TransManager(); tm.begin();//开启事物 try { //sql执行代码 // // tm.commit();//更改完sql之后 ...

  8. python基础--基础练习题（一）

    1. 输出如下内容: 1 1 2 1 2 2 3 1 3 2 3 3 4 1 4 2 4 3 4 4 思路:应该是要用两个循环,外层循环控制第一个数字,内层控制输出的次数 for i in range ...

  9. MyEclipse 启动慢，优化

    找到安装目录,修改myeclipse.ini 文件: -Xms2048m -Xmx8192m -XX:MaxPermSize=512m -XX:ReservedCodeCacheSize=256m

  10. linux command 3

    #user 相关命令 #新创建一个oracle用户,这初始属于oinstall组,且同时让他也属于dba组.useradd oracle -g oinstall -G dba #删除指定用户 –r:是 ...