高德地图自定义marker图标及点击marker显示内容框

原创已于 2022-08-05 18:24:25 修改 · 7k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

于 2022-08-05 18:23:10 首次发布

本文介绍了如何通过高德地图API创建地图，设置样式，添加自定义标记，并实现点击标记后的信息窗口展示。关键步骤包括申请API key，创建地图容器，以及利用Geocoder进行地址解析。

1、首先创建高德地图账号，根据调用的接口申请高德地图API，这里使用了地图js API和Web服务的key。首先引入高德地图调用的js接口

<script src="https://webapi.amap.com/maps?v=1.4.15&key=申请的key"></script>//Web服务 的key
<script src="https://webapi.amap.com/maps?v=1.4.15&key=申请的key&plugin=AMap.Geocoder"></script>//地图js API的key

2、创建一个地图容器

<div id="container"></div>

3、需要给容器设定高度和宽度

html,body{
	width: 100%;
	height: 100%;
}
#container {
	width: 100%;
	height: 100%;
	overflow-y: hidden;
}

4、js代码

//初始化地图对象，加载地图
var map = new AMap.Map("container", {
	resizeEnable: true, 
	mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式
	center: [104.164941,30.671515],
});
var geocoder = new AMap.Geocoder({
    city: "", //城市设为北京，默认：“全国”
});
var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
var lnglats = ["104.100303","30.654034"];//标记点的经纬度
//创建marker图标的大小和图片路径 ---如果是多个点可把下方代码放入循环进行循环标点
var startIcon = new AMap.Icon({
	// 图标尺寸
	size: new AMap.Size(32, 32),
	// 图标的取图地址
	image: '../img/biaoji.png',
	// 图标所用图片大小
	imageSize: new AMap.Size(32, 32),
	// 图标取图偏移量
	imageOffset: new AMap.Pixel(-5, 0)
});
//创建marker
var marker = new AMap.Marker({
	position: lnglats,
	icon: startIcon ,
    map: map
});
marker.content = "<div>我是弹出内容</div>";//绑定点击marker弹出的内容样式
marker.on('click', markerClick);
function markerClick(e) {
		infoWindow.setContent(e.target.content);
		infoWindow.open(map, e.target.getPosition());
}
//如果多个点循环结束的地方
map.setFitView();
window.onload = function() {
	map.plugin(["AMap.ToolBar"], function() {
		map.addControl(new AMap.ToolBar());
	});
	if(location.href.indexOf('&guide=1')!==-1){
		map.setStatus({scrollWheel:false})
	}
}