使用高德地图js api 制作网页上的地图应用。

1.先申请一个 开发者用的 key 。

2. 在页面中引入高德提供的地图js  <script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key"></script>

完成以上两步就可以在页面中加载 高德地图了。

注意设置 地图容器的 大小：

　　

 <!DOCTYPE HTML>

 <html>

  <head>

     <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

     <script src="http://webapi.amap.com/maps?v=1.3&key=efda1426d63ee7f7582d11fd6376cfed"></script>

     <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>

     <script type ="text/javascript" src ="jquery.js"></script>

     <style type="text/css">

       #container{

         height: 800px;

         width: 700px

       }

     </style>

  </head>

 <body>

  <div id="container">

  </div>

   <script>

      var map = new AMap.Map('container',{zoom:10,resizeEnable:true,center:[116.39757156,39.90973623]});

      var marker = new AMap.Marker({

      position:[121.62689209,38.91240739],

      map:map

      });

   </script>

 </body>

 </html>

高德地图 js api 使用的更多相关文章

  1. 高德地图 JS API - 根据地名实现标记定位

    德地图 JS API 使用前的准备工作请参考官方网站说明: https://lbs.amap.com/api/javascript-api/guide/abc/prepare 根据地名实现地图标记定位 ...

  2. 高德地图JS API 开发小结

    项目中有一块功能要用到高德地图,所以,想把编码小结一下. 首先是地图的初始化 var map = new AMap.Map("mapDiv", {                  ...

  3. 高德地图 JS API - 根据经纬度获取周边建筑地标

    像我们经常用的微信或微博,发表动态时都有选择位置的功能,根据当前的定位获取附近的地标.利用高德地图我们就可以实现这样的功能. 1. 具体代码: // 高德地图查询周边 function aMapSea ...

  4. 高德地图JS API获取经纬度，根据经纬度获取城市

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  5. 高德地图 JS API (jsp + miniui(子页面数据返回父页面并设值) + 单个点标记 + 点标记经纬度 + 回显 + 限制地图显示范围+搜索)

    -*-  父页面js function mapFocus(){ //console.log("-*-"); var longitude = mini.get("jd&qu ...

  6. 高德地图JavaScript API开发研究

    高德地图JavaScript API是一套用JavaScript 语言编写的应用程序接口,可以通过各种API接口向地图添加内容,创建功能丰富.交互性强的地图应用.高德地图JavaScript API ...

  7. 在谷歌地图上绘制行政区域轮廓【结合高德地图的API】

    实现思路: 1.利用高德地图行政区域API获得坐标列表 2.将坐标列表绘制在谷歌地图上[因为高德地图和国内的谷歌地图都是采用GCJ02坐标系,所有误差很小,可以不进行坐标误差转换] 注意点: 1.用百 ...

  8. 高德地图 JavaScript API 开发系列教程（二）

    上节简单介绍高德地图JavaScript API及网页中基本地图展示.有了地图后我们可以用来做什么?有人说离我最近的超市在哪里,我怎么去?别急,这些功能我们后面都会慢慢实现.今天为大家详细讲解如何在地 ...

  9. 高德地图 JavaScript API 开发系列教程（一）

    高德地图 API 提供包括 Web API 即 JavaScript API,Android API,定位API,IOS API,WP API,Win8 API等,本系列教程主要针对高德 JavaSc ...

随机推荐

  1. oracle TABLE ACCESS BY INDEX ROWID 你不知道的索引回表-开发系列（三）

    1 引言 近期系统常常提示一个sql查询时间过长的问题,看了一下就是一个每天依照时间戳统计前一天量的sql. 表总的数据量为53483065. 语句例如以下: select count(x.seria ...

  2. vue2项目 ：在hosts里面配置了装逼的模式。设置应用在127.0.0.1:80端口访问； 并将127.0.0.1指向www.yours.com ；问题“ Invalid Host header”

    转自博客:https://www.cnblogs.com/cynthia-wuqian/p/8575401.html 1.MAC设置应用在127.0.0.1:80端口访问: config/index. ...

  3. Tool bar

    Toolbar ADJFToolBar;Button ADJFBackButton; ADJFToolBar = (Toolbar) findViewById(R.id.ADJFToolBar); / ...

  4. MapReduce编程实例4

    MapReduce编程实例: MapReduce编程实例(一),详细介绍在集成环境中运行第一个MapReduce程序 WordCount及代码分析 MapReduce编程实例(二),计算学生平均成绩 ...

  5. C#版本的xUnit的测试框架模型和xUnit.NET开源项目

    1. 参考kent beck的测试驱动写的C#测试框架模型 a) 测试用例: WasRun, 基类为TestCase b) 框架: TestCaseTest用来测试TestCase,本身也是它的子类, ...

  6. 线程同步工具CountDownLatch

    CountDownLatch的一个非常典型的应用场景是:有一个任务想要往下执行,但必须要等到其他的任务执行完毕后才可以继续往下执行.假如我们这个想要继续往下执行的任务调用一个CountDownLatc ...

  7. SpringBoot 获取前端页面参数的集中方式总结

    SpringBoot的一个好处就是通过注解可以轻松获取前端页面的参数,之后尅将参数经过一系列处理传送到后台数据库,前端时间正好用到.大致分为一下几种: 1.指定前端URL请求参数名称与方法名称一致,这 ...

  8. [转]jna模拟指针开辟空间，数组首地址获取值

    http://blog.csdn.net/zhuzhichao0201/article/details/5817819 不是很明白,先记在这里 ———————————————————————————— ...

  9. boost实用工具：assign库了解学习

    许多时候,我们需要为容器初始化或者赋值,填入大量的数据; STL容器仅提供了容纳这些数据的方法,但是填充的步骤是相当地麻烦(insert.push_back); 于是,boost::assign出现了 ...

  10. iOS-.pch如何使用

    今天我们要说的是.pch这个文件 我相信大家并不陌生,因为如果是新手开发工程师 总会被它搞得总报错误. 那么我们要知道.pch到底是干什么的,说白了就是一个预编译文件,在运行程序之前,要对头文件等一些 ...