高德地图-初始化地图
2016-05-14 23:20
267 查看
1、问题背景
利用高德地图的接口,创建一个以武汉为中心点的地图,放大级别是18
2、实现源码
3、实现结果
4、结果说明
(1)引入地图核心JS
(2)创建地图中心点
(3)创建地图容器
(4)创建实例化地图
(5)初始化调用
利用高德地图的接口,创建一个以武汉为中心点的地图,放大级别是18
2、实现源码
<!DOCTYPE html> <html> <head> <title>初始化地图</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta name="viewport" content="initial-scale=1.0,user-scalable=no"> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style type="text/css"> html,#map{height:100%} body{height:100%;margin:0px;padding:0px} </style> <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=密钥"></script> <script type="text/javascript"> function initMap() { //创建中心点坐标 var map=new AMap.LngLat(114.309531, 30.59619); //创建实例化地图 var mapObj=new AMap.Map("map",{ view:new AMap.View2D({ center:map, zoom:18 }) }); } </script> </head> <body onload="initMap();"> <div id="map"></div> </body> </html>
3、实现结果
4、结果说明
(1)引入地图核心JS
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=密钥"></script>
(2)创建地图中心点
var map=new AMap.LngLat(114.309531, 30.59619);两个数字分别是经度和纬度
(3)创建地图容器
<div id="map"></div>
(4)创建实例化地图
var mapObj=new AMap.Map("map",{ view:new AMap.View2D({ center:map, zoom:18 }) });
(5)初始化调用
onload="initMap();"
相关文章推荐
- C# 关于判断字符串为空的一些方法
- java-接口回调
- BlockingQueue
- Java集合框架(java collections framework)
- NET Core全新的配置管理
- 教你实现Android下划线能滑动的Tab标签页
- JRE与JDK简介
- hadoop 注解之 interfaceAudience interfaceStability
- java运行jar文件
- iOS开发学习线路图
- 插入排序和归并排序
- 话说正确率、召回率和F值
- 第十二周上机实践——项目1-实现复数类中的运算符重载-(1)
- iptables 添加,删除,查看,修改
- apache2.4 + mod_proxy + tomcat7 配置集群和负载均衡
- 史上最简单的servlet项目实例
- Github Atom
- 129. Sum Root to Leaf Numbers
- 排序方法(一)
- PAT L1-6 最长连续因子