高德地图-设置点标注的文本标签

1、问题背景

高德地图中,设置选中位置,并自定义图标和文字提示

2、实现源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<title>高德地图-设置点标注的文本标签</title>
		<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    	<script src="http://webapi.amap.com/maps?v=1.3&key=c2eb520334ddc5ab2bb70a3afe6a58cc"></script>
    	<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
	</head>
	<body>
		<div id="container"></div>
		<script>
			var map = new AMap.Map("container",{
				resizeEnable: true,
        		center: [115.397428, 41.90923],
        		zoom: 19
			});

			var marker = new AMap.Marker({
		        position: map.getCenter()
		    });

		    marker.setMap(map);
		    //设置鼠标划过点标记显示的文字提示
		    marker.setTitle("设置位置");
		    marker.setLabel({
		        offset: new AMap.Pixel(15, 15),
		        content: "定位名称"
		    });
		</script>
	</body>
</html>

3、实现结果

再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow

原文地址:https://www.cnblogs.com/odejsjhshw/p/10367099.html

时间: 2024-11-10 19:24:14

高德地图-设置点标注的文本标签的相关文章

高德地图-设置直线路线

1.问题背景 给点了地图上两个坐标,然后连接两个点,成为一条直线 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=&qu

高德地图调用和添加标注

看过高德地图API的同学都知道,高德地图不同端调用是不一样的,作为一个前端菜鸟,前一阵分别在pc端和移动端分别调用了高德地图.情况是这个样子的,PC端呢我们可以用高德API的web端的javascript代码.调用没有问题,具体是这样的: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title

【高德地图API】从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物

覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在一张地图上,除了底层的底图(瓦片图,矢量图),控件(有功能可操作的工具),最重要最不可缺少的就是覆盖物了.覆盖物有多种,包括,标注.折线.多边形.信息窗口.聚合marker.麻点图和图片覆盖物.本文会详细介绍每一种覆盖物的概念,添加方法,修改方法,移除方法等.最后会提供示例和源代码下载. 示例demo:http://zhaoziang.com/amap/zero_3_1.html ----------------------------

高德地图基础设置

1.引用高德地图 <!DOCTYPE HTML> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" > <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <titl

【高德地图】逆地址解析 设置和应用

最近自己做了一个小程序,引用了高德地图的逆地址解析API,在此就相关设置和具体应用整理一下: 所谓的逆地址解析:通过经纬度解析出对应的位置. 第一步:要是用API 首先要申请key,页面展示如下: 1.输入key的名称 (起一个名字,便于识别,开发中没用到) 2.我选择的是浏览器 3.点击提交就会生成一个类似GCCBZ-7NMW6-HMOSD-EVWW3-WBN3Z-4XBLZ这样的密钥,请求时,赋值给key 第二步:查看高德地图API说明文档 请求示例:   response示例: 注意: 可

IOS原生地图与高德地图

原生地图 1.什么是LBS LBS: 基于位置的服务   Location Based Service 实际应用:大众点评,陌陌,微信,美团等需要用到地图或定位的App 2.定位方式 1.GPS定位      2.基站定位      3.WIFI定位 3.框架 MapKit:地图框架,显示地图 CoreLocation:定位框架,没有地图时也可以使用定位. 4.如何使用原生地图<MapKit> 和定位<CoreLocation> MapKit: 1) 初始化MapView _map

利用高德地图完成用户地图选址,包括搜索位置和标签固定居中

这两天一直捣鼓着地图的选址功能,需要达到的要求是:1,能用户定位  2,大头针固定在地图中心,拖动地图停止后获取到该大头针的位置信息    3,能通过搜索框搜索到我们输入的地址 主要思路:大头针分为两个   一个是用户的位置大头针  另一个是所选取的位置的大头针(包括拖动后的大头针和搜索功能查找到位置的大头针,公用一个大头针  )并且两个大头针都成为控制器器属性. 我使用到的高德地图sdk是: 'AMap3DMap' , '5.2.1' #高德3D地图 'AMapSearch' , '5.2.1

【高德地图API】从零开始学高德JS API(四)搜索服务

摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址解析,公交导航,驾车导航,步行导航,道路查询(交叉口),行政区划等等.如果说覆盖物Marker是地图的骨骼,那么服务,就是地图的气血.有个各种各样的地图服务,我们的地图应用才能变得有血有肉,活灵活现.第四篇拆成了几个要点,本篇主要讲搜索服务.包括周边搜索,关键词搜索,范围搜索,搜索提示(自动完成,输入提示),行政区域,交叉路口,检索自有数据(云图). demo:http://zhaoziang.com/amap/zero_4_1.html

Android Studio之高德地图实现定位和3D地图显示

在应用开发中,地图开发是经常需要使用的"组件",国内比较出名的是就是百度地图和高德地图. 此博客讲的是高德地图实现定位和3D地图显示,并标注相应位置,话不多说,先看看效果,在上代码. 效果如图: 首先注册高德成为开发者(打开高德地图,点击底部的开发者平台),创建应用,按照要求填写相应信息,如下图: 途中包含了发布版的SHA1安全码和测试版SHA1安全码,两者的值可以看  博客 :Android Studio apk打包,keystore.jks文件生成,根据keystore密钥获取SH