高德地图的项目要做

学习笔记记录下来

一、注册账号并申请Key 

二、准备页面写好

1.在页面添加 JS API 的入口脚本标签，并将其中「您申请的key值」替换为您刚刚申请的 key；

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

2. 添加div标签作为地图容器，同时为该div指定id属性；

  1. <div id="container"></div>

3. 为地图容器指定高度、宽度；

  1. #container {width:300px; height: 180px; }

4. 进行移动端开发时，请在head内添加viewport设置，以达到最佳的绘制性能；

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

三、创建一个简单的地图

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  7. <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
  8. <title>地图显示</title>
  9. <style>
  10. html, body, #container { width: 100%; height: 100%; }
  11. </style>
  12. </head>
  13. <body>
  14. <div id="container"></div>
  15. <!-- 加载地图JSAPI脚本 -->
  16. <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=您申请的key值"></script>
  17. <script>
  18. var map=new AMap.Map('container',{
  19.      resizeEnable: true, //是否监控地图容器尺寸变化
  20.      zoom:11, //初始化地图层级
  21.      center: [116.397428, 39.90923], //初始化地图中心点
  22.      viewMode:'3D'//使用3D视图
  23.     })
  24. </script>
  25. </body>
  26. </html>

高德地图的JSAPI学习笔记【一】的更多相关文章

  1. Corelocation及地图控件学习笔记

    Corelocation基本使用 在地图章节的学习中,首先要学的便是用户位置定位,因此我们首先要掌握Corelocation的使用.(在IOS8以前可以系统会直接请求授权,现在需要我们自己调用方式通知 ...

  2. 平面上的地图搜索--Java学习笔记（四）

    版权声明: 本文由Faye_Zuo发布于http://www.cnblogs.com/zuofeiyi/, 本文可以被全部的转载或者部分使用,但请注明出处. 这一个月以来,都在学习平面上的地图搜索,主 ...

  3. 百度地图开发者API学习笔记二

    一,地图上多个覆盖物(Marker). 当有多个覆盖物时,我们需要获取每个点的信息.如下图,每个Marker的经度都不相同 二,代码: <!DOCTYPE html> <html&g ...

  4. 百度地图开发者API学习笔记一(转载)

    一,实现功能: 在地图上标记点,划线等操作.如下图. 2.代码: <!DOCTYPE html> <html> <head> <meta http-equiv ...

  5. AngularJS指令封装高德地图组件

    1 概述 公司移动门户原来是基于AngularJS指令封装的百度地图组件,用于签到.签退.定位等功能,在使用过程中发现百度地图频繁的弹出广告,所以打算重新引用其它地图组件,最后决定基于AngularJ ...

  6. iOS学习笔记-地图MapKit入门

    代码地址如下:http://www.demodashi.com/demo/11682.html 这篇文章还是翻译自raywenderlich,用Objective-C改写了代码.没有逐字翻译,如有错漏 ...

  7. ArcGIS JS 学习笔记1 用ArcGIS JS 实现仿百度地图的距离量测和面积量测

    一.开篇 在博客注册了三年,今天才决定写第一篇博客,警告自己不要懒!!! 二.关于ArcGIS JS 版本选择 在写这篇博客时ArcGIS JS 4.0正式版已经发布.它和3.x版本的不同是,Map不 ...

  8. Windows phone 8 学习笔记(8) 定位地图导航

    原文:Windows phone 8 学习笔记(8) 定位地图导航 Windows phone 8 已经不使用自家的bing地图,新地图控件可以指定制图模式.视图等.bing地图的定位误差比较大,在模 ...

  9. 【Unity 3D】学习笔记29：游戏的例子——简单的小制作地图

    无论学习.只看不练是坏科学. 因此,要总结回想这怎么生产MMROPG小地图的游戏.于MMROPG游戏类,在游戏世界中行走时导致各地,通常在屏幕的右上角,将有一个区域,以显示当前的游戏场景微缩.在游戏世 ...

随机推荐

  1. luoguP2882Face The Right Way

    https://www.luogu.org/problem/P2882 题意 你有n头牛,每头牛有个朝向,你每次可以选择连续k头牛翻转,求k为多少时可以用最少的步骤将所有牛朝向变为正向 n≤5000 ...

  2. c# 第16节 一维数组的声明及使用

    本节内容: 1:为什么要有使用数组 2:数组的简介 3:一维数组的声明 4: 实例数组声明 5:一维数组的使用 6:一维数组使用注意地方 1:为什么要使用数组 2:数组的简介 3:一维数组的声明 4: ...

  3. 石欣钰-201871010117 《面向对象程序设计（java）》第六、七周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业要求在哪里 https://www.cnblogs.com/nwnu-daizh/p/ ...

  4. Hive学习之修改表、分区、列

    Hive学习之修改表.分区.列 https://blog.csdn.net/skywalker_only/article/details/30224309 https://www.cnblogs.co ...

  5. C++使用OpenCV打印运行时间

    代码 int64 tall = cv::getTickCount(); std::cout<< "time:" << (cv::getTickCount() ...

  6. Mysql基础知识--概述和索引

    一.Mysql概述 MySQL原来隶属于MySQL公司,总部位于瑞典 2008.1.16MySQL被SUN公司收购 2009年SUN公司被Oracle公司收购 常见的软件版本 GA(general A ...

  7. java为什么学JavaScript？

    就现在的趋势来说,Spring无疑是一家独大的,它有太多利益 现在在Java EE开发中,Spring已经成为和Java核心库一样的基础设备,所以说假如想成为一个合格的Java程序员,Spring必定 ...

  8. 洛谷P5437/5442 约定（概率期望，拉格朗日插值，自然数幂）

    题目大意:$n$ 个点的完全图,点 $i$ 和点 $j$ 的边权为 $(i+j)^k$.随机一个生成树,问这个生成树边权和的期望对 $998244353$ 取模的值. 对于P5437:$1\le n\ ...

  9. [LeetCode] 85. Maximal Rectangle 最大矩形

    Given a 2D binary matrix filled with 0's and 1's, find the largest rectangle containing only 1's and ...

  10. xshell 与服务器断开连接后 服务停止500internal error

    看某教程用uwsgi +nginx运行django项目,但是xshell关掉之后服务会停止. 大佬一席话,胜趟十天坑. 把supervisor配置好之后正常运行. 如何配置?百度啊! 附录一个好的教程 ...