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改用高德地图,原本的百度地图坐标是可以直接使用的,由于高德和百度地图的坐标系不一致 要如 ...
随机推荐
- 查看docker容器的内存占用
使用docker stats命令可以查看容器的内存,但是有时候docker stats命令获得的数据可能准确,可以参考下面这种方式 先通过docker ps -a 找到容器的container id ...
- 开源ERP系统Odoo搭建文档
本文参考链接地址: https://devecho.com/v/209/ https://www.cnblogs.com/wxylog/p/6386974.html 什么是Odoo 为什么选择Odoo ...
- 保存数据到Excel中
调用的方法传值 Export(dt, "Cal_Report_" + DateTime.Now.ToString("yyyyMMddhhmmss") + &qu ...
- python3中的urllib.parse的常用方法
将URL按一定的格式进行拆分 使用 urllib.parse.urlparse将url分为6个部分,返回一个包含6个字符串项目的元组:协议.位置.路径.参数.查询.片段 参照官方地址:https:// ...
- gentoo freemind 安装设置
安装 freemind 之后,感觉菜单上面的字体比较模糊,通过设置 tools --> preference 中的 defaults --> default fonts 里面 的 defa ...
- try、catch、finally都有return语句时执行哪个
任何执行try 或者catch中的return语句之前,都会先执行finally语句,如果finally存在的话.如果finally中有return语句,那么程序就return了,所以finally中 ...
- jeecg开源项目的IDEA的部署
JEECG采用了SpringMVC + Hibernate + Minidao(类Mybatis) + Easyui(UI库)+ Jquery + Boostrap + Ehcache + Redis ...
- Android Studio模拟器磁盘空间不足(Not enough disk space to run AVD)
在Android Studio中运行模拟器时,提示Error: Not enough disk space to run AVD '....'. Exiting.是说安装模拟的磁盘空间不足,导致无法运 ...
- Hibernate 再接触 性能优化
Sessionclear 否则session缓存里越来越多 Java有内存泄露吗? 在语法中没有(垃圾自动回收) 但是在实际中会有 比如读文件没有关什么的 1+N问题 解决方法:把fetch设置为la ...
- 吴裕雄 python深度学习与实践(8)
import cv2 import numpy as np img = cv2.imread("G:\\MyLearning\\TensorFlow_deep_learn\\data\\le ...