高德地图创建自定义覆盖物

程序员文章站 2022-06-04 15:22:01

...

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>添加自定义点覆盖物</title>
<style>
body{ margin:0; padding:0;font:12px/16px Verdana,Helvetica,Arial,sans-serif;}
/* 定义自定义点样式 */
div.marker{height:40px;width:120px;background:url(http://pages.haozu.ajkcdn.com/20110909/img/map/marker.png) left top no-repeat;white-space:nowrap;}
div.marker span{ display:inline-block;height:28px;line-height:28px;margin:0 10px;color:#FFF;background:url(http://pages.haozu.ajkcdn.com/20110909/img/map/marker_bg_170x28.gif) right top no-repeat;padding-right:10px;}

/* 修改背景URL */
div.change{display:inline-block;background-image:url(http://pages.haozu.ajkcdn.com/20110909/img/map/marker-h.png);}
div.change span{background-image:url(http://pages.haozu.ajkcdn.com/20110909/img/map/marker-h-l.gif);}
</style>
<link rel="stylesheet" href="/Public/Css/demo.Default.css" type="text/css" />
<script language="javascript" src="http://webapi.amap.com/maps?v=1.2【&key=Your Key】"></script>
<script language="javascript">
var mapObj,tool,view,scale;
function mapInit(){
	mapObj = new AMap.Map("map",{
		center:new AMap.LngLat(116.392936,39.919479)
	});
	mapObj.plugin(["AMap.ToolBar","AMap.OverView,AMap.Scale"],function(){
		//加载工具条
		tool = new AMap.ToolBar({
			direction:false,
			ruler:false,
			autoPosition:false//禁止自动定位
		});
		mapObj.addControl(tool);
		//加载鹰眼
		view = new AMap.OverView({visible:false});
		mapObj.addControl(view);
		//加载比例尺
		scale = new AMap.Scale();
		mapObj.addControl(scale);
	});
}
function addCustomMarker(){
	//自定义覆盖物dom 元素
	var m = document.createElement("div");
	m.className = "marker";
	var n = document.createElement("span");
	n.innerHTML = "Amap";
	m.appendChild(n);
	
	var marker1 = new AMap.Marker({
		map:mapObj,
		position:new AMap.LngLat(116.373881,39.907409), //基点位置
		offset:new AMap.Pixel(0,-40), //相对于基点的偏移位置
		//draggable:true,  //是否可拖动
		content:m   //自定义覆盖物内容
	});
	
	
	//mouseover,换个皮肤
	AMap.event.addListener(marker1,'mouseover',function(){
		n.innerHTML = "高德地图"; //修改内容
		m.className = "marker change";//增加样式
	});
	
	
	//mouseout,换回皮肤
	AMap.event.addListener(marker1,'mouseout',function(){
		n.innerHTML = "Amap"; //修改内容
		m.className = "marker";
	});
	
}
</script>
</head>
<body onLoad="mapInit()">
<div id="map" style="width:659px;height:400px;border:#F6F6F6 solid 1px;"></div>
<a href="javascript:addCustomMarker()">添加自定义点覆盖物</a>
</body>
</html>

下一篇：尿毒症的症状及预防措施

高德地图创建自定义覆盖物

c#两种方式调用google地球,调用COM API以及调用GEPLUGIN 与js交互，加载kml文件，dae文件。将二维高德地图覆盖到到三维谷歌地球表面。

c#两种方式调用google地球,调用COM API以及调用GEPLUGIN 与js交互，加载kml文件，dae文件。将二维高德地图覆盖到到三维谷歌地球表面。

高德地图API之DOM事件+自定义事件

【百度地图API】如何给自定义覆盖物添加事件

高德地图怎么创建个人指南?高德地图创建个人指南教程

android高德地图网络路径实现自定义marker并点击弹出自定义窗口

高德地图开发自定义地图样式

高德官宣！海外地图服务年内上线：首批覆盖亚洲多个国家

高德地图获取所有指定覆盖物

高德地图获取指定覆盖物（转）