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改用高德地图,原本的百度地图坐标是可以直接使用的,由于高德和百度地图的坐标系不一致 要如 ...
随机推荐
- Pascal语言(存档)
数据类型 标准函数 运算符和表达式 输入语句 输出语句 if语句 case语句 for语句 while语句 repeat语句 函数与过程 形参与实参 全局变量与局部变量 数组 字符串 枚举 子界 集合 ...
- CentOS安装mysql源码包
1.# cd /usr/local/src 2.上传mysql.tar.gz文件 3.# tar -zxvf mysql-5.6.36-linux-glibc2.5-x86_64.tar.gz 4.# ...
- HTML翻转菜单练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- qrcode生成二维码
代码: <!DOCTYPE html> <html lang="en" style="height: 99%"> <head> ...
- asp.net 微信JsSDK
有时间再整理吧 using System; using System.Collections.Generic; using System.Linq; using System.Web; using S ...
- javascript权威指南第1章Js概述js语言核心
<html> <head> <script> function Point(x,y){ this.x=x; this.y=y; } ,); console.log( ...
- STL里的内存池实现
这个貌似有点复杂,解决的主要问题 就是 减少 内存分配次数,减少用户态核心态切换中断次数,提高运行速度,预分配 和线程池一个道理,预分配 ////////////////////自由链表 union ...
- tensorflow读取本地MNIST数据集
tensorflow读取本地MNIST数据集 数据放入文件夹(不要解压gz): >>> import tensorflow as tf >>> from tenso ...
- layer弹窗和日期
这个插件用的最多的是,弹窗和日期
- linux安装rabbitmq3.6.5
一.准备依赖包 yum install build-essential openssl openssl-devel unixODBC unixODBC-devel make gcc gcc-c++ k ...