高德地图 js api 使用

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

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

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

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

  

 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
 8     <script src="http://webapi.amap.com/maps?v=1.3&key=efda1426d63ee7f7582d11fd6376cfed"></script>
 9     <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
10     <script type ="text/javascript" src ="jquery.js"></script>
11     <style type="text/css">
12       #container{
13         height: 800px;
14         width: 700px
15       }
16     </style>
17  </head>
18 <body>
19  <div id="container">
20  </div>
21   <script>
22      var map = new AMap.Map(‘container‘,{zoom:10,resizeEnable:true,center:[116.39757156,39.90973623]});
23      var marker = new AMap.Marker({
24      position:[121.62689209,38.91240739],
25      map:map
26      });
27   </script>
28 </body>
29 </html>

时间: 2024-08-04 05:38:37

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

高德地图JavaScript API开发研究

原文:高德地图JavaScript API开发研究 高德地图JavaScript API是一套用JavaScript 语言编写的应用程序接口,可以通过各种API接口向地图添加内容,创建功能丰富.交互性强的地图应用.高德地图JavaScript API 提供了大量的实用工具和富有特色的插件功能,并提供了搜索和路线规划等服务. 1.首先 2.然后 3.最后就是看官方文档开发 高德地图API使用介绍:http://lbs.amap.com/api/javascript-api/guide-2/map_

百度地图JS API移动端,phonegap 自定义覆盖物Click事件无法执行 的 bug 解决方法

当你为自定义覆盖物添加了click事件后,你会发现在移动端是无论如何也触发不了的,这算是一个BUG. 最近我在为我的地图APP开发第二版,在为一个覆盖物添加行为事被困扰到了,自定义覆盖物的click事件竟然无法在iPhone端触发,以及百度地图JS API里面的开源库涉及到自定义覆盖物click事件的均无效. 我为这个BUG烦恼了很久,直到今天,在QQ群里网友(在此要先感谢这位网友mooring)告诉了我解决方法:iPhone上的自定义覆盖物事件默认会触发map的click事件,如果map定义了

【原创】web端高德地图javascript API的调用

关于第三放地图的使用,腾讯.百度.高德 具体怎么选择看你自己怎么选择了. 高德地图开放平台:http://lbs.amap.com/ 本次使用的是高德的javascript API http://lbs.amap.com/api/javascript-api/summary/ 使用方法 1.注册成为高德地图开发者,创建应用后申请key. 2.引入高德地图API <script type="text/javascript" src="http://webapi.amap.

调用高德地图web api 规划路线

实现地图输出,出发地与目的地路线,效果如下 具体代码如下 <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-sc

百度地图JS API

1.百度地图api的使用 1)申请百度账号和ak 2)引用百度地图API文件 <script src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> 3)获取当前位置的经纬度 //获取当前位置的经纬度 getCurrentPosition:function(context,params){ //navigator.geolocation部分手机有权限问题 Vue.prototype.$comm

关于百度地图js api的getCurrentPosition定位不准确的解决方法

很久之前帮大叔解决了一个gps坐标转换为百度地图坐标的问题.今天大叔又给我讲百度地图定位不准.我查了一下api,用了官方给出的这样一组函数. 1 //创建查询对象 2 var geolocation = new BMap.Geolocation(); 3 4 //调用getCurrentPosition函数 5 geolocation.getCurrentPosition(function (position) { 6 7 //如果查询成功 8 if (this.getStatu() == 'B

vue-cli2.X中引入高德地图,将其设为全局对象

平时一般未用脚手架构建或用webpack构建的项目只要用script标签引入即可,在vue-cli 2.X构建的项目中,需要用如下方式引入高德地图: 首先在高德地图开放平台中注册开发者账号并获取key,传送门:https://lbs.amap.com/api/javascript-api/guide/abc/prepare 接下来在cli项目根目录下的index.html中的<header>标签中用script标签引入 <script type="text/javascript

2017高德地图API WEB开发(key申请,地图搭建)简约教程

前端时间因为公司需要研究 了一下百度的教程 然后写个简约的笔记记录一下自己学习的收获,只为了满足自己暂时的写作热情 高德地图WEB开发(key申请.api)简约教程 1.首先我们需要去"高德地图开发平台" 通过"百度搜索 "或者"谷歌搜索 " 高德地图然后会有一个高德开发平台|高德地图apl 2.登录高德开发平台 这是高德开发平台的官网,然后点击登录,没有注册就好 3.进入控制台创建新应用 进入控制台之后选择"应用管理"然后点

使用高德地图api导入行政区域及经纬度

高德地图提供了行政区域及经纬度查询api 参考如下链接 高德地图行政区域api 具体实现代码如下 package com.test; import java.util.HashMap;import java.util.Map; import org.json.JSONArray;import org.json.JSONObject; import jvc.util.DBUtils;import jvc.util.NetUtils;import jvc.util.db.Insert; public