web集成高德地图
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集成高德地图的更多相关文章
- vue集成高德地图
vue集成高德地图 前言 二.使用步骤 1.注册高德开发平台 2.vue 结尾 前言 之前玩Thymeleaf的时候玩过高德地图,现在无聊Vue项目也整个地图进去~ 二.使用步骤 1.注册高德开发平台 ...
- web端高德地图javascript API的调用
[转载https://www.cnblogs.com/zimuzimu/p/6202244.html]web端高德地图javascript API的调用 关于第三放地图的使用,腾讯.百度.高德 具体怎 ...
- 【原创】web端高德地图javascript API的调用
关于第三放地图的使用,腾讯.百度.高德 具体怎么选择看你自己怎么选择了. 高德地图开放平台:http://lbs.amap.com/ 本次使用的是高德的javascript API http://lb ...
- Android集成高德地图如何自定义marker
高德地图自定义Marker 高德地图默认的marker样式是这种 一般的修改样式是通过icon接口来调整 MarkerOptions markerOptions = new MarkerOptions ...
- Vue项目(vuecli3.0搭建)集成高德地图实现路线轨迹绘制
先看最后实现的效果图 高德地图api文档 https://lbs.amap.com/api/javascript-api/summary 使用 1.在index.html里面引入高德地图js文件 2. ...
- Android 集成高德地图
先上一张图片看看实现的效果啦!!! 首先登陆高德的开发者平台进行创建自己的应用程序,填写对应的包名,填写sHA1值(这个我这博客中写了获取的代码,可以直接复制粘贴),说了这么多其实都是废话,来我们看重 ...
- 基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中。
react-amap 这是一个基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中. 文档实例预览: Github Web | Gitee Web 特性 ️ 自动加载高德地 ...
- objective-c高德地图时时定位
这篇随笔是对上一遍servlet接口的实现. 一.项目集成高德地图 应为我这个项目使用了cocopods这个第三方库管理工具,所以只需要很简单的步骤,就能将高德地图集成到项目中,如果你没使用过这工具, ...
- Android笔记:百度地图与高德地图坐标转换问题
安卓项目使用了百度地图的定位SDK,web端使用的也是百度地图, 后来发现界面显示百度地图不如高德效果好,web改用高德地图,原本的百度地图坐标是可以直接使用的,由于高德和百度地图的坐标系不一致 要如 ...
随机推荐
- C/C++中的volatile简单描述
首先引入一篇博客: 1. 为什么用volatile? C/C++ 中的 volatile 关键字和 const 对应,用来修饰变量,通常用于建立语言级别的 memory barrier.这是 BS 在 ...
- 静态初始化块和main方法哪个先被执行?
直接看代码 public class BlockAndMain { public static void main(String[] args) { System.out.println(" ...
- [UE4]Size Box
一.Size Box用来指定一个特定的尺寸 二.Size Box只能放一个子控件 三.Size Box一般作为Canvas Panel的子控件,并勾选Size To Content选项,而不作为根节点 ...
- 【oracle常见错误】oracle监听程序配置/“ORA-12541: TNS: 无监听程序”
问题描述 在用PL/SQL Developer连接Oracle 11g时报错“ORA-12541: TNS: 无监听程序”,如下图所示.可以按照如下的步骤进行解决. 解决方案 监听程序配置 从开始菜单 ...
- 【Selenium】各种方式在选择的时候应该怎么选择
最后再总结一下,各种方式在选择的时候应该怎么选择: 1. 当页面元素有id属性时,最好尽量用id来定位.但由于现实项目中很多程序员其实写的代码并不规范,会缺少很多标准属性,这时就只有选择其他定位方法. ...
- Oracle创建pfile spfile 文件及其恢复
1.Oralce在启动实例的时读取$ORACLE_HOME/dbs下面的初始化文件.初始化文件分为:A.静态参数文件PFILE,一般名为initSID.oraB.永久参数文件SPFILE,一般名为sp ...
- component lists rendered with v-for should have explicit keys
错误:component lists rendered with v-for should have explicit keys 解析:使用vue 的v-for时,需要:key指定唯一key 文档:h ...
- 《深入理解JAVA虚拟机》----------第二章 JAVA内存区域与内存溢出异常,笔记(下)
2. HotSpot虚拟机对象探秘 2.1 对象的创建 虚拟机遇到一条New指令时,首先将去检查这个指令的参数是否能在常量池中定位到一个类的符号引用,并且检查这个符号引用代表的类是否已被加载.解析和初 ...
- MFC笔记8
1.在循环使用数组时需要清理数组 CString str; memset(str,0,strlen(str)); 判断两个字符串包含数字大小是否相等 CString str="22" ...
- C程序的编译与链接
编译器驱动程序 编译器驱动程序可以在用户需要时调用语言预处理器.编译器.汇编器和链接器. 例如使用GNU编译系统,我们需要使用如下命令来调用GCC驱动程序: gcc -o main main.c 编译 ...