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改用高德地图,原本的百度地图坐标是可以直接使用的,由于高德和百度地图的坐标系不一致 要如 ...
随机推荐
- java新手抖机灵(java新手技巧)
java新手抖机灵(java新手技巧) 1.交换两个整数的值 好处是不用定义临时变量,显得代码简洁,提高运行效率 其实也可以用+-*/进行这种运算 比如可以这样: a = a + b; b = a - ...
- 06 python下
# st='hello kitty {name} is {age}' # # print(st.count('l')) # 统计元素个数 # print(st.capitalize()) # 首字母大 ...
- Entity Frame Code First 简易教程
简介 什么是ORM 搭建Entity FrameWork CodeFirst应用 数据库迁移 表属性常见配置 Entity FrameWork 一对多.多对多 一.简介 Entity Framewor ...
- 10. 批量插入List<String>
List<String> iscBusOrgIdList = getIscOrgIdList();List<Map<String, Object>> iscBusO ...
- grep -A -B -C 显示抓取的前后几行参数
我经常用grep找东西,比如用户名和密码.大部分站点和用户名和密码都是在一样的,方便grep查找.有时,为了文本好看,我会放在多行.比如 wikipedia多个语言版本上有多个账号,就放在wikipe ...
- sqlserver float小数存数据库变成多位了 比如说12.23存进去变成 12.229999998 甚至更长
使用 numeric(12,2)的数据类型,或者decimal(12,2) 追问 不能随意修改表结构 有别人办法么 程序上控制的 追答 那你就不用管他了,所谓 浮点数,必然是这么存储的.
- 用java语言构建一个网络服务器,实现客户端和服务器之间通信,实现客户端拥有独立线程,互不干扰
服务器: 1.与客户端的交流手段多是I/O流的方式 2.对接的方式是Socket套接字,套接字通过IP地址和端口号来建立连接 3.(曾经十分影响理解的点)服务器发出的输出流的所有信息都会成为客户端的输 ...
- python中的多进程与多线程(二)
1.使用多线程可以有效利用CPU资源,线程享有相同的地址空间和内存,这些线程如果同时读写变量,导致互相干扰,就会产生并发问题,为了避免并发问题,绝不能让多个线程读取或写入相同的变量,因此python中 ...
- docker 入门第一步
docker 安装 利用yum 安装 yum 源更新到最新版本,命令: yum update 需要安装工具 net-tools 命令:yum install -y net-tools 配置docke ...
- Linux下chkconfig命令介绍
一.引论 chkconfig命令检查.设置系统的各种服务.这是Red Hat公司遵循GPL规则所开发的程序,它可查询操作系统在每一个执行等级中会执行哪些系统服务, 其中包括各类常驻服务.谨记chkco ...