html页面调用高德自定义地图

最新推荐文章于 2024-05-19 22:05:56 发布

前端-文龙刚

最新推荐文章于 2024-05-19 22:05:56 发布

阅读量1.4k

点赞数 1

分类专栏： html+css Javascript 文章标签： html 前端

本文链接：https://blog.csdn.net/qq_17211063/article/details/130881051

版权

Javascript 同时被 2 个专栏收录

84 篇文章 1 订阅

订阅专栏

html+css

34 篇文章 1 订阅

订阅专栏

第一步：先注册自己的高德地图账号（可以使用支付宝直接登录）

第二步：创建一个自己的应用地图

①点击创建新应用

②添加key

③添加了key之后，就会是这样的

第三步：选择定制地图

第四步：选择自定义地图（只能拥有一个自定义的，后续需要付费）

第五步：根据自己的需求去定义（完成后保存并发布）

第六步：发布成功后就能得到你自己的自定义样式ID

最后就是在页面中调用使用

<html>
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title></title>
		<script type="text/javascript">
		    window._AMapSecurityConfig = {
	            securityJsCode:'你申请的安全密钥',
	        }
		</script>
		<script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.15&key=你的key&plugin=AMap.Geocoder'></script>
	</head>
	<body>
		
	</body>
</html>
<script type="text/javascript">
	//初始化地图对象，加载地图
	var map = new AMap.Map("containerSjjg", {
		resizeEnable: true,
		zoom: 12,
		position: [109.179944, 34.751776],
		mapStyle: "amap://styles/自定义样式的ID",
	});
</script>

最终的效果： (#^.^#)