高德地图的项目要做

学习笔记记录下来

一、注册账号并申请Key 

二、准备页面写好

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

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

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

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

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

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

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

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

三、创建一个简单的地图

<!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">

<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />

<title>地图显示</title>

<style>

html, body, #container { width: 100%; height: 100%; }

</style>

</head>

<body>

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

<!-- 加载地图JSAPI脚本 -->

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

<script>

var map=new AMap.Map('container',{

     resizeEnable: true, //是否监控地图容器尺寸变化

     zoom:11, //初始化地图层级

     center: [116.397428, 39.90923], //初始化地图中心点

     viewMode:'3D'//使用3D视图

    })

</script>

</body>

</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. SpingBoot四——前后端分离

    ◆版权声明:本文出自胖喵~的博客,转载必须注明出处. 转载请注明出处:https://www.cnblogs.com/by-dream/p/11336057.html 根据之前的教程,我们已经可以独立 ...

  2. 【大数据】0001---使用SparkSQL关联两个表求和取前几行

    场景: 有两个表,表可以是文本或Json数据,结构化后分别是Table1(A,B,C)和Table2(C.D.E),两个表通过C关联,要求求出D+E之和,并以(A.B.D+E)三列返回 解答: 思路: ...

  3. 【转】前后端分离的项目如何部署发布到Linux

    前后端分离的项目如何部署发布到Linux 前期准备 1.服务器的基本配置信息2.本机远程连接服务器的工具(xshell.xftp或者mobaXterm等等,看你自己喜欢) 第一步:部署环境 1.安装j ...

  4. Oracle告Google输了

    Oracle告Google输了 boxi • 2016-05-27 • 大公司 Google表示,陪审团的认定代表了Android生态体系.Java开发社区以及依靠开放免费编程语言开发创新消费者产品的 ...

  5. MyBatis 插入记录同时获取主键

    MyBatis 插入记录同时获取主键 MyBatis 插入记录同时获取主键的系统界面 useGeneratedKeys 属性 keyProperty 属性 keyColumn 属性 selectKey ...

  6. Python-numpy包中多维数组转置，transpose.swapaxes的轴编号（axis）的理解

    transpose()中三个轴编号的位置变化理解 transpose(a,b,c)其中a轴编号即为参考编号,垂直于a的平面即为所有平面,该平面上的数据再根据b,c相对于(0,1,2)的位置关系进行改变 ...

  7. jsp中如何使用Ueditor

    在jsp页面中类似word编辑器操作textarea   使用步骤: step1.官网下载Ueditor  http://ueditor.baidu.com/website/download.html ...

  8. [转]细说OpenSessionInView问题

    转载:https://www.cnblogs.com/zjrodger/p/4615809.html. [环境参数] 环境:SSH框架 [问题描述]  NoSession问题 HibernateTem ...

  9. 获取oracle中某张表的各个字段名称

    select column_name from all_tab_columns where table_name='AT2_SSIS_CHNDB_CLIENT_INFO'

  10. x58平台 服务器电源配置 tdp

    我的机器配置: 处理器:    Intel(R) Xeon(R) CPU           X5660  @ 2.80GHz *2主板:    TYAN Tyan Tank GT20-B7002LN ...