-
2021-01-14 16:21:12
public void showCityAtMap(MapView mapView) {
if (aMap == null) {
aMap = mapView.getMap();
}
aMap.clear();
aMap.moveCamera(CameraUpdateFactory.zoomTo(5));
ArrayList allCity = (ArrayList) DataSupport.findAll(WeatherDataInfo.class);
for (WeatherDataInfo weatherDataInfo : allCity) {
LatLng latLng = new LatLng(weatherDataInfo.getLat(), weatherDataInfo.getLon());
aMap.addMarker(new MarkerOptions().position(latLng).draggable(false).snippet(""+weatherDataInfo.getPosition())
.icon(BitmapDescriptorFactory.fromView(
getInfoWindow(weatherDataInfo.getName(),
weatherDataInfo.getTmp(),
weatherDataInfo.getIcon()))));
}
aMap.setOnMarkerClickListener(new AMap.OnMarkerClickListener() {
@Override
public boolean onMarkerClick(Marker marker) {
listener.onWindowClick(Integer.parseInt(marker.getSnippet()));
return true;
}
});
}
主要是利用addMarker方法添加一个Marker,但Marker的样式为自定义的View:
public View getInfoWindow(String city, String temp, int icon) {
View view = View.inflate(BaseUtils.getContext(), R.layout.marker_info_layout, null);
TextView tvCity = (TextView) view.findViewById(R.id.tv_city);
TextView tvTemp = (TextView) view.findViewById(R.id.tv_temp);
ImageView ivIcon = (ImageView) view.findViewById(R.id.iv_icon);
tvCity.setText(city);
tvTemp.setText(temp);
ivIcon.setImageResource(icon);
return view;
}
布局:
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@drawable/custom_info_bubble"
android:orientation="vertical">
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:gravity="center">
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tv_city"
android:textSize="20sp"
android:textColor="@color/colorAccent"
/>
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:orientation="horizontal"
android:gravity="center">
android:layout_width="30dp"
android:layout_height="30dp"
android:id="@+id/iv_icon"
/>
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tv_temp"
android:textColor="@android:color/black"
android:textSize="26sp"/>
更多相关内容 -
高德地图 js 搜索获取坐标转换地图添加标记
2018-09-30 17:33:35高德地图搜索获取坐标转换地图添加标记 记得换成自己申请的KEY值。 -
在vue中高德地图引入和轨迹的绘制的实现
2021-01-21 14:10:16高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中...key: ‘********************',//自己在高德地图平台上的key值 plugin: [‘AMap.Autocomplete', ‘AMap.PlaceSearch', ‘AMap.Scal -
高德地图风场效果demo源代码
2020-10-29 14:47:03源代码提供高德地图风场效果,下载解压后,本地启动静态服务,即可看风场特效;本demo地图地图是基于高德地图,同时支持百度地图、天地图等作为底图 -
JS基于高德地图定位城市闪烁特效
2021-06-24 09:57:28JS基于高德地图定位城市闪烁特效是一款基于高德api地图的点位闪烁效果,利用canvas自定义图层实现闪烁效果。 -
关于如何在vue中使用高德地图,以及添加信息窗体
2022-01-08 15:52:08然后在vue项目中输入命令下载高德地图插件 npm i @amap/amap-jsapi-loader --save 然后在你想要使用的组件中导入 import AMapLoader from "@amap/amap-jsapi-loader"; 创建一个盛放地图的盒子 <div ...首先需要自己去注册高德地图开发者平台的账号获取key码,
然后在vue项目中输入命令下载高德地图插件
npm i @amap/amap-jsapi-loader --save
然后在你想要使用的组件中导入
import AMapLoader from "@amap/amap-jsapi-loader";
创建一个盛放地图的盒子
<div class="map-box" id="container"> </div>
然后在methods里使用,并且需要在mounted中初始化地图插件
methods:{ initMap() { var that=this AMapLoader.load({ "key": "", // 申请好的Web端开发者Key,首次调用 load 时必填 "version": "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15 "plugins": [], // 需要使用的的插件列表,如比例尺'AMap.Scale'等 "AMapUI": { // 是否加载 AMapUI,缺省不加载 "version": '1.1', // AMapUI 缺省 1.1 "plugins":[], // 需要加载的 AMapUI ui插件 } }).then(AMap => { this.map = new AMap.Map("container", { //设置地图显示的缩放级别 zoom: 15, // 是否允许鼠标拖拽 dragEnable: true, // 鼠标滚轮放大缩小 scrollWheel: true, // 双击放大缩小 doubleClickZoom: true, // 键盘控制发达缩小移动旋转 keyboardEnable: false, // 手势控制 touchZoom: false, center: [114.614989, 38.025327],//设置地图中心点坐标 }), // //构建信息窗体中显示的内容 // this.info.push("<p class='input-item'>地址 :河北省石家庄市方大科技园</p></div></div>"), // this.infoWindow = new AMap.InfoWindow({ // content: this.info.join("") //使用默认信息窗体框样式,显示信息内容 // }), // this.infoWindow.open(this.map, this.map.getCenter()) //在指定位置打开信息窗体 (function () { // console.log(this) //构建信息窗体中显示的内容 var info = []; info.push("<p class='input-item'>地址 :河北省石家庄市方大科技园</p></div></div>"); let infoWindow = new AMap.InfoWindow({ content: info.join("") //使用默认信息窗体框样式,显示信息内容 }); infoWindow.open(that.map, that.map.getCenter()); })() }).catch(e => { console.log(e); }); } }, mounted(){ this.initMap() }
注:这里盛放地图容器盒子的id(container)需要和地图实例中的名字想对应
this.map = new AMap.Map("container", { }
如果需要加信息窗体,例如:
就需要在then回调中加
function openInfo() { //构建信息窗体中显示的内容 var info = []; info.push("<div class='input-card content-window-card'><div><img style=\"float:left;\" src=\" https://webapi.amap.com/images/autonavi.png \"/></div> "); info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>高德软件</h4>"); info.push("<p class='input-item'>电话 : 010-84107000 邮编 : 100102</p>"); info.push("<p class='input-item'>地址 :北京市朝阳区望京阜荣街10号首开广场4层</p></div></div>"); infoWindow = new AMap.InfoWindow({ content: info.join("") //使用默认信息窗体框样式,显示信息内容 }); infoWindow.open(map, map.getCenter()); }
这里我写了一个例子:
initMap() { var that=this AMapLoader.load({ "key": "", // 申请好的Web端开发者Key,首次调用 load 时必填 "version": "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15 "plugins": [], // 需要使用的的插件列表,如比例尺'AMap.Scale'等 "AMapUI": { // 是否加载 AMapUI,缺省不加载 "version": '1.1', // AMapUI 缺省 1.1 "plugins":[], // 需要加载的 AMapUI ui插件 } }).then(AMap => { this.map = new AMap.Map("container", { //设置地图显示的缩放级别 zoom: 15, // 是否允许鼠标拖拽 dragEnable: true, // 鼠标滚轮放大缩小 scrollWheel: true, // 双击放大缩小 doubleClickZoom: true, // 键盘控制发达缩小移动旋转 keyboardEnable: false, // 手势控制 touchZoom: false, center: [114.614989, 38.025327],//设置地图中心点坐标 }), // 1.直接写 // this.info.push("<p class='input-item'>地址 :河北省</p></div></div>"), // this.infoWindow = new AMap.InfoWindow({ // content: this.info.join("") //使用默认信息窗体框样式,显示信息内容 // }), // this.infoWindow.open(this.map, this.map.getCenter()) //2.封装成函数写 (function () { // console.log(this) //构建信息窗体中显示的内容 var info = []; info.push("<p class='input-item'>地址 :河北省石家庄市方大科技园</p></div></div>"); let infoWindow = new AMap.InfoWindow({ content: info.join("") //使用默认信息窗体框样式,显示信息内容 }); infoWindow.open(that.map, that.map.getCenter()); })() }).catch(e => { console.log(e); }); }
这样就可以了
注:如果封装成函数来写,需要注意this指向,这里函数中this不指向vue组件了,需要借助另一个变量来赋值操作,也就是把this赋值给that,这时候我们就把that当做this来用,从而使得that指向vue组件
var that=this
-
高德地图POI数据爬取
2020-12-21 20:08:35首先,需要在高德地图开放平台上注册账号,并且申请web服务的AK密钥。注册账号登陆后点击右上角的控制台 ->应用管理 -> 创建应用 -> 添加新key,注意选择web 服务,就得到了一个可以使用web服务的key密钥。一定是Web... -
高德地图实现绘制覆盖物,自定义右键菜单
2021-02-26 15:07:08使用高德地图js-api实现绘制圆形、矩形、多边形;右键可删除可自定义菜单; -
html前端使用高德地图入门教程,并在地图上标记位置-Go语言中文社区
2021-06-12 05:09:16准备工作注册Key首先,登陆之后,在进入「应用管理」 页面「创建新应用」为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」记住这个Key,等会要用,以后可能也会用,一定要...在body后面引入高德地图的...准备工作
注册Key
首先,
登陆之后,在进入「应用管理」 页面「创建新应用」
为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」
记住这个Key,等会要用,以后可能也会用,一定要记住。
页面上的准备
新建一个DIV,作为地图的容器(这一步和使用其他插件一样,必须新建一个挂载点)。
给这个新建的div设置好宽高(这里提醒一下,可以使用弹性布局,没有影响)。
在body后面引入高德地图的js。
最后,异步初始化高德地图插件,一定要异步,使用window.onLoad。(去获取标记点的经纬度)
【注】 高德地图Api入门指南
#container{
width: 500px;
height: 500px;
}
//初始化地图插件
window.onload = function(){
var map = new AMap.Map("container", {
zoom: 15, //设置地图显示的缩放级别
center: [116.44927, 39.9584] //设置地图中心点坐标
});
// 创建一个 Marker 实例:(标记点)
var marker = new AMap.Marker({
position: new AMap.LngLat(116.44927, 39.9584), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
title: "位置标题"
});
// 将创建的点标记添加到已有的地图实例:
map.add(marker);
}
好了,现在你的页面上已经出现了高德地图
-
vue异步加载高德地图的实现
2020-08-27 08:08:16主要介绍了vue异步加载高德地图的实现,详细的介绍了异步加载的实现方法。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 -
vue使用elementui结合高德地图的定位以及位置显示
2020-11-25 21:56:42里面包含了elementui结合高德地图的定位已经位置标记相关的资料,里面的定位组件下载就可使用,包含组件和说明文档。 -
gmap中添加高德地图(标准,卫星,和混合路网地图)
2018-01-22 14:12:28在gmap高德地图基础上,添加了高德混合地图,保证可用 -
Android Kotlin开发高德地图
2021-04-21 04:08:59Android Kotlin开发高德地图,仿微信 发送位置功能源码,高德定位、地图、搜索SDK、动画、添加标记的使用 -
Android实现高德地图显示及定位
2021-01-05 00:40:54然后在高德地图官网上登录你注册的账号并且去控制台—–>应用管理—–>添加新key 获取到自己的key值 获取key的具体方法的官网地址 2、通过解压得到.Jar文件并放到libs文件中,手动添加到依赖库中(右键Add—-)... -
高德地图城市统计、点聚合、热点图、添加点
2017-11-21 09:58:35显示省份、市、区统计、 热点图、具体数据点 需要在线访问高德地图 访问的时候, 请用 http 形式访问, 文件系统可能导致 json 测试数据无法访问 -
高德地图自定义地图apidemo
2018-06-07 14:45:22高德地图自定义地图apidemo,地图样式,标注样式,自定义窗体 -
Html5获取高德地图定位天气的方法
2020-11-21 15:37:13// 高德map https://webapi.amap.com/maps?v=1.4.11&key=你的高德地图的key export default function MapLoader () { return new Promise((resolve, reject) => { if (window.AMap) { resolve(window.AMap) } else ... -
近期使用高德地图 JS api 的部分总结
2021-01-12 08:39:22高德 JS api 总结简介此次是对最近...Vue 中引入高德地图 apinpm 包引入npm i amap-js -S复制代码优点:开箱即用,使用简单script 脚本引入在 index.html 中加入链接,链接后跟申请的 key。type="text/javascript"...高德 JS api 总结
简介
此次是对最近使用高德地图的JS api做一个总结,关于各个类可以实现什么效果,以及如何使用。之后会总结一些常见问题的优化思路和解决办法。
Vue 中引入高德地图 api
npm 包引入
npm i amap-js -S
复制代码
优点:开箱即用,使用简单
script 脚本引入
在 index.html 中加入链接,链接后跟申请的 key。
src="https://webapi.amap.com/maps?v=1.4.15&key=[key]"
>
复制代码
在 vue.config.js 中配置全局名,在代码中可以通过 vue 实例直接调用。
module.exports = {
configureWebpack: {
externals: {
AMap: "AMap",
AMapUI: "AMapUI"
}
};
}
复制代码
优点:定制化程度高,可以按需组合功能。
高德地图基础概念
地图
地图是高德地图 api 的承载,所有的 api 都需要由一个地图来接收,同一个界面可以有多个地图。
复制代码
this.map = new this.AMap.Map("container", {
resizeEnable: true, // 是否监控地图容器尺寸变化
zoom: 15, // 初始化地图层级
zooms: [5, 18], //地图允许缩放的层级
center: [117.96, 40.96], // 初始化地图中心点
mapStyle: "amap://styles/407154d906b9cd83d4e5e57df8b27cec" //自定义地图发布的样式
});
复制代码
图层
图层是覆盖在地图上的一个个层,每一层具有不同的功能,层与层之间拥有层级关系。
官方图层
类名说明是否插件AMap.TileLayer切片图层类否
AMap.TileLayer.Satellite卫星图层类,继承自 TileLayer否
AMap.TileLayer.RoadNet路网图层类,继承自 TileLayer否
AMap.TileLayer.Traffic实时交通图层类,继承自 TileLayer否
AMap.Buildings楼块图层,独立显示矢量楼块数据的一种图层否
AMap.MassMarks图海量麻点图层类否
AMap.Heatmap热力图插件是
AMap.LayerGroup图层集合,用来包装其它图层类的实例并对集合做批量操作否
AMap.LabelsLayer标注图层,用于添加 LabelMarker 类型标注否
// 卫星
let satellite = new AMap.TileLayer.Satellite();
// 路网
let road = new AMap.TileLayer.RoadNet();
this.map.setLayers([satellite, road]);
复制代码
自建图层
类名说明是否插件AMap.TileLayer.Flexible自定义切片图层,即可灵活自定义切片内容的栅格图层,继承自 AMap.TileLayer否
AMap.ImageLayer图片图层,可将图片叠加在地图的对应区域否
AMap.CanvasLayerCanvas 图层,可将 Canvas 叠加在地图的对应区域否
AMap.VideoLayerVideo 图层,可将视频叠加在地图的对应区域否
AMap.CustomLayer完全自定义绘制的图层否
let imageLayer = new AMap.ImageLayer({
url:
"http://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg",
bounds: new AMap.Bounds([116.327911, 39.939229], [116.342659, 39.946275])
});
复制代码
WMS/WMTS
类名描述是否插件AMap.TileLayer.WMS用于加载 OGC 标准的 WMS 图层否
AMap.TileLayer.WMTS用于加载 OGC 标准的 WMTS 图层否
var wms = new AMap.TileLayer.WMTS({
url:
"https://services.arcgisonline.com/arcgis/rest/services/Demographics/USA_Population_Density/MapServer/WMTS/",
blend: false,
tileSize: 256,
params: {
Layer: "0",
Version: "1.0.0",
Format: "image/png",
TileMatrixSet: "EPSG:3857"
}
});
复制代码
覆盖物
覆盖物是绘制在地图上的一些矢量图形或图标。
Marker 类
点标记,图标可以自定义。
Text 类
文本标注,可以添加自定义样式的文本。
Polyline 类
折线
Polygon 类
多边形
BezierCurve 类
贝塞尔曲线
Circle 类
圆形
OverlayGroup 类
OverlayGroup 是覆盖物管理类,可以用此类批量管理覆盖物的显示隐藏及其他操作。
信息窗体
信息窗体是根据地图位置偏移显示在界面上的一个 HTML 节点。
this.infoWindow = new this.AMap.InfoWindow({
isCustom: true,
autoMove: true,
closeWhenClickMap: true,
anchor: "top-left",
content: document.getElementById("infoWindow"),
offset: new this.AMap.Pixel(22, 22)
});
复制代码
地图控件
地图控件是官方封装的一些用来控制地图操作的组件。
控件名称说明是否插件AMap.ControlBar组合了旋转、倾斜、复位、缩放在内的地图控件,在 3D 地图模式下会显示(自 V1.4.0 版本新增)是
AMap.MapType地图类型切换插件,用来切换固定的几个常用图层是
AMap.OverView地图鹰眼插件,默认在地图右下角显示缩略图是
AMap.Scale地图比例尺插件是
AMap.ToolBar地图工具条插件,可以用来控制地图的缩放和平移是
this.map.plugin(["AMap.ControlBar"], () => {
let controlBar = new AMap.ControlBar(Options);
this.map.addControl(controlBar);
});
复制代码
工具
插件名称说明是否插件AMap.MouseTool鼠标工具插件是
AMap.CircleEditor圆编辑插件,用于编辑 AMap.Circle 对象是
AMap.PolyEditor折线、多边形编辑插件是
AMap.BezierCurveEditor贝瑟尔曲线编辑插件是
AMap.EllipseEditor椭圆编辑插件是
AMap.RectangleEditor矩形编辑插件是
AMap.Hotspot地图热点是
AMap.MarkerClusterer点聚合插件是
AMap.RangingTool距离量测插件是
事件监听
使用on( eventName, handler, context)和off( eventName, handler, context)方法对地图及地图元素进行监听。
eventName:事件名称(必填)
handler:事件回调函数(必填)
context:事件回调中的上下文(可选,缺省时,handler 中 this 为调用 on 方法的对象本身,否则 this 指向 context 引用的对象)
注意:多次绑定时,当 eventName、handler 函数对象、context 对象有任意一个不一样就会再次绑定。
-
Flutter集成高德地图获取定位信息
2021-01-21 19:44:32首先需要在高德开放平台注册一个用户,并申请一个key和你的项目相关联,地址:https://lbs.amap.com/登录后进入:控制台→应用管理→我的应用→创建新应用→添加key(底下附上流程) 应用名称随便填写,符合... -
vue项目引入高德地图
2018-06-19 11:19:31在vue项目中,添加高德地图。对开发地图的开发人员有一定帮助 -
高德地图显示多个标注点 弹跳效果 title
2018-11-02 10:09:22使用高德地图显示多个标注点 有 弹跳效果 可自定义 title -
高德地图定位、周边搜索、位置弹框、添加覆盖物等功能
2017-09-07 14:34:53高德地图定位、周边搜索、位置弹框、添加覆盖物等功能,可以自定义定位,添加覆盖物,覆盖物点击事件等,自定义定位按钮 -
高德地图上添加marker,给每一个marker添加点击事件。
2021-06-03 03:05:58高德地图上添加marker,给每一个marker添加点击事件。高德地图上添加marker,给每一个marker添加点击事件。javascriptvar watch = []$.ajax({type: 'GET',dataType: 'jsonp',url:url +'你的url地址',error: function... -
高德地图小程序SDK新增功能:绘制静态图
2021-03-29 20:05:16运用静态地图功能,可快速生成一张地图图片,可以指定显示的地图区域、图片大小、以及在地图上添加覆盖物,如标签、标注、折线、多边形。 可用于快速生成一张个性化涂鸦的静态地图用于查看和分享。 (此图片来源于... -
Kotlink_高德地图_gladnsr_定位_android_
2021-10-01 00:29:41Kotlin开发高德地图,仿微信 发送位置功能源码,高德定位、地图、搜索SDK、动画、添加标记的使用 -
前端vue如何使用高德地图
2021-01-18 18:27:53在vuecli public文件夹中的index.html添加导入 JS API 的入口脚本标签 <!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta ... -
vue使用高德地图点击下钻上浮效果的实现思路
2020-12-13 13:47:10这里给使用高德地图下钻提供一个思路 先讲下我的思路,高德地图api有一个地图绘制区域,你只要提供区码,就可以绘制该区域。以浙江省为例,我一开给浙江省的区码就可以绘制出浙江省的区域,接下来我要进入杭州市,当... -
百度地图偏移,高德地图偏移的解决方法
2017-05-27 10:00:22百度纠偏 高德纠偏 地图纠偏 地图偏移 -
vue.js高德地图实现热点图代码实例
2020-12-29 19:40:591.在index.html引入高德地图JSAPI [removed][removed] 2.地图dom <div id=container xss=removed></div> 3.js实现 export default { data() {}, methods:{ initMap(){ let map = new AMap.Map('