<!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>
相关推荐
使用高德地图js-api实现绘制圆形、矩形、多边形;右键可删除可自定义菜单;
是用的是高德地图 包含定位,覆盖物,和根据缩放级别改变覆盖物的大小,和pop的弹窗显示内容
高德地图自定义信息窗体样式
在高德地图中点击弹出自定义弹框(气泡)。(结合上一个上传的文件,也可用于标记点的点击弹出的弹框气泡)
高德地图自定义地图apidemo,地图样式,标注样式,自定义窗体
支持百度,高德地图,自定义绘画覆盖物,手绘覆盖物,判断大头针是否在覆盖物内
Android 高德地图自定义点聚合marker图片及Overlay点击选中功能的代码实现及布局文件
高德地图自定义infowindow,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
高德地图定位、周边搜索、位置弹框、添加覆盖物等功能,可以自定义定位,添加覆盖物,覆盖物点击事件等,自定义定位按钮
Android 高德地图自定义点聚合marker图片及Overlay点击选中功能的代码实现及布局文件
原生 JavaScript 仿 有赞商户后台,介入高德地图,实现地图自定义区域矩形划分并绑定 ui 层,几乎每行代码都有注释,方便修改理解。 适用多个项目领域,如:外卖送货、共享单车区域划分、配送商品等。 纯前端...
自定义地图的线路规划问题,代码可以直接的借用,方便大家学习
高德地图自定义图层,能够实现用户点击后,提示文字
高德地图自定义吹出uiview, 动态生成uiview并在地图上显示
ShitMap覆盖物添加demo
高德地图自定义平滑移动,效果比高德好
解决高德地图锁屏黑屏定位不更新,高德地图绘制定位轨迹,高德定位判断定位停留点,高德地图绘制弹出框等内容。高德地图将所有坐标绘制在可视区域内,本程序作为向高德地图申请高德LBS开发平台开发者认证证书的做业...
高德地图自定义运动轨迹
使用react和高德地图实现自定义点标记,筛选高德地图、react使用高德地图展示自定义点标记,筛选项目截图
《《必须自己填写高德api的key才有效果》》PC端实现根据用户定位坐标判断是否在配送范围,高德地图框选多边形范围,代码是没问题的,但你们要填写一下高德api的key才有效果。