1、使用高德地图API需到官网添加一个Key,http://lbs.amap.com/dev/key/app

2、页面头引入


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

3、js里面代码如下:

// 新建高德地图对象
var map = new AMap.Map("addressMap", { // 填写ID
center: [114.1827800000, 22.3060300000], // 经纬度
zoom: 17 // 放大系数
}); // 增加高德地图插件
AMap.plugin(
["AMap.ToolBar", "AMap.Geolocation"],
function () {
//异步加载插件
var toolbar = new AMap.ToolBar();
map.addControl(toolbar);
var geolocation = new AMap.Geolocation();
map.addControl(geolocation);
var marker = new AMap.Marker({
position: [114.1827800000, 22.3060300000],
title: '某地方',
topWhenClick: true,
visible: true,
animation: 'AMAP_ANIMATION_BOUNCE',
clickable: true,
label: {content: '<span style="color:rgb(0,0,0);">某地方</span>'}
});
map.add(marker);
}
);

具体API请到官网查看: http://lbs.amap.com/api/javascript-api/summary

还可以唤起高德地图客户端:

var gaodeLoc = [114.18217800000, 22.2720300000];
var marker = new AMap.Marker({
position: gaodeLoc
});
marker.markOnAMAP({
position: marker.getPosition(),
name: 'XXXXX地名'
});

web集成高德地图的更多相关文章

  1. vue集成高德地图

    vue集成高德地图 前言 二.使用步骤 1.注册高德开发平台 2.vue 结尾 前言 之前玩Thymeleaf的时候玩过高德地图,现在无聊Vue项目也整个地图进去~ 二.使用步骤 1.注册高德开发平台 ...

  2. web端高德地图javascript API的调用

    [转载https://www.cnblogs.com/zimuzimu/p/6202244.html]web端高德地图javascript API的调用 关于第三放地图的使用,腾讯.百度.高德 具体怎 ...

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

    关于第三放地图的使用,腾讯.百度.高德 具体怎么选择看你自己怎么选择了. 高德地图开放平台:http://lbs.amap.com/ 本次使用的是高德的javascript API http://lb ...

  4. Android集成高德地图如何自定义marker

    高德地图自定义Marker 高德地图默认的marker样式是这种 一般的修改样式是通过icon接口来调整 MarkerOptions markerOptions = new MarkerOptions ...

  5. Vue项目(vuecli3.0搭建)集成高德地图实现路线轨迹绘制

    先看最后实现的效果图 高德地图api文档 https://lbs.amap.com/api/javascript-api/summary 使用 1.在index.html里面引入高德地图js文件 2. ...

  6. Android 集成高德地图

    先上一张图片看看实现的效果啦!!! 首先登陆高德的开发者平台进行创建自己的应用程序,填写对应的包名,填写sHA1值(这个我这博客中写了获取的代码,可以直接复制粘贴),说了这么多其实都是废话,来我们看重 ...

  7. 基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中。

    react-amap 这是一个基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中. 文档实例预览: Github Web | Gitee Web 特性 ️ 自动加载高德地 ...

  8. objective-c高德地图时时定位

    这篇随笔是对上一遍servlet接口的实现. 一.项目集成高德地图 应为我这个项目使用了cocopods这个第三方库管理工具,所以只需要很简单的步骤,就能将高德地图集成到项目中,如果你没使用过这工具, ...

  9. Android笔记:百度地图与高德地图坐标转换问题

    安卓项目使用了百度地图的定位SDK,web端使用的也是百度地图, 后来发现界面显示百度地图不如高德效果好,web改用高德地图,原本的百度地图坐标是可以直接使用的,由于高德和百度地图的坐标系不一致 要如 ...

随机推荐

  1. 廖雪峰Java7处理日期和时间-2Data和Calendar-1Date

    计算机中如何存储和表示日期和时间 Epoch Time:从1970年1月1日零点(格林威治时区/GMT+00:00)到现在经历的秒数,也叫timestamp, 例如: 秒级: * 北京 2016-11 ...

  2. VS调试提示“无法启动程序,“...exe”。系统找不到指定文件

    当VS调试提示上图所示的警告时,常用的方法是检查“项目”-“属性”-“配置属性”-“常规”-“输出目录”里的路径 项目”-“属性”-“配置属性”-“链接器”-“常规”-“输出文件”里的路径,是否一致, ...

  3. Java笔记Spring(二)

    spring-core 通过Gradle构建工具,转换包的命名空间为org.springframework下 cglib包,net.sf.cglib -> org.springframework ...

  4. uva-10382-贪心

    题意:对于长为L,宽为W的矩形草地,需要对它进行浇水,总共有n个水龙头,给每个水龙头的浇水半径,和位置.求覆盖整个草地需要的最小水龙头数量. 如图,把浇水的面积转换成矩形,然后就和区间覆盖一样了,直接 ...

  5. 子类中加virtual 有用没?多重继承的机制 还需要再探!

    class D:public C{ public: D(){cout << "D()" << endl;} virtual ~D(){ cout <& ...

  6. python中的异常处理常用方法

    异常处理 什么是异常? 异常就是与正常情况不同,程序在执行过程中出现错误,导致无法执行完毕.异常其实就是代码执行过程中出错. 常见的一些异常 AttributeError 试图访问一个对象没有的属性, ...

  7. C语言中 .h文件和.c文件的区别

    要理解.c文件与.h文件有什么不同之处,首先需要弄明白编译器的工作过程,一般说来编译器会做以下几个过程: 1.预处理阶段 2.词法与语法分析阶段 3.编译阶段,首先编译成纯汇编语句,再将之汇编成跟CP ...

  8. MQTT服务器本地搭建

    1.1 初认识MQTT协议. 2.1 下载压缩包 前往EMQ下载地址:http://emqtt.com/downloads ,下载您的系统的版本,一般选择稳定版. 2.2 解压并运行 C:\Users ...

  9. Git 分支合并:合并某次提交

    有时只想合并其它分支到某次提交,而不是所有提交. 一 切换到当前分支 首先,在做一次可能有冲突的合并前尽可能保证工作目录是干净的. 如果你有正在做的工作,要么提交到一个临时分支要么储藏它. 这使你可以 ...

  10. 【python深入】collections-Counter使用总结

    关于collections的使用,首先介绍:Counter的使用 需要执行:from collections import Counter 在很多使用到dict和次数的场景下,Python中用Coun ...