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

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 = "
我是弹出内容
"
;//绑定点击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}) } }

你可能感兴趣的:(javascript,前端,html)