<!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>
分享到：
相关推荐
3. 创建自定义菜单，这可能是一个浮动的div元素，包含多个操作选项，如删除当前覆盖物。 4. 为每个菜单项绑定点击事件，根据用户的选择执行相应的操作，如删除特定覆盖物。 在这个项目中，`map.html`文件很可能是...
高德地图API提供了创建、添加、删除覆盖物的方法，支持多种类型的覆盖物，如Marker（点状标记）、Polyline（线状路径）和Polygon（多边形区域）。 接着，我们要讨论如何“根据缩放级别改变覆盖物的大小”。地图的...
开发者可以通过监听地图点击事件，结合自定义覆盖物，实现这一功能。覆盖物可以是图标、标记或者自定义形状，它们不仅可以美化地图，还能承载特定的数据和交互逻辑。 添加覆盖物是高德地图API的一个重要特性，...
`Infowindow`是地图上的一个浮动视图，通常在点击地图上的标记（Marker）或者覆盖物时显示，用于显示更详细的相关信息。下面我们将深入探讨如何实现高德地图的自定义`Infowindow`功能。 首先，了解`Infowindow`的...
在百度地图API和高德地图SDK中，都有相应的接口支持自定义覆盖物的创建。 对于百度地图，我们可以使用`BMap.Marker`类来创建基本的标记，然后通过`BMap.Polygon`或`BMap.Polyline`类绘制多边形或线性覆盖物。如果...
1. 创建一个自定义的`Overlay`类，继承自`ItemizedOverlay<OverlayItem>`，在这个类中你需要重写`draw()`方法，绘制覆盖物。 2. 在`draw()`方法内，根据每个`OverlayItem`的位置，使用`Canvas`绘制自定义的图标。 3....
3. 创建自定义图层：利用高德地图提供的`Overlay`基类，可以创建自定义覆盖物。比如，我们可以创建一个简单的标记覆盖物，并在点击时显示提示文字。 ```javascript function CustomMarker(position) { AMap.Marker....
在“ShitMap覆盖物添加demo”中，我们可以假设这是一种示例或者教程，展示了如何在地图上添加自定义覆盖物。这可能包括以下几个步骤： 1. **初始化地图**：首先，需要引入地图API（例如Google Maps API、高德地图...
总的来说，这个项目展示了如何结合Vue.js和高德地图API来创建一个交互式的地图应用，实现了覆盖物的轮播切换功能。通过这个示例，你可以学习到如何操作地图对象，动态更新地图内容，以及如何使用Vue.js构建可复用的...
高德地图API提供了覆盖物的自定义能力，开发者可以创建自定义的`MapView.OnMapLoadedCallback`监听地图加载完成事件，然后根据当前地图的缩放级别(`map.getZoomLevel()`)来调整覆盖物的尺寸。 弹窗（Pop-up Window...
3. **自定义覆盖物**：在高德地图API中，你可以通过创建自定义覆盖物（Overlay）来表示聚合后的点。覆盖物可以是一个图标，也可以是自定义的视图，包含聚合点的数量信息。 4. **事件处理**：当用户缩放地图时，需要...
总结来说，高德地图的经典案例涵盖了定位服务、自定义图标和Marker的使用、地图覆盖物的添加以及导航功能的实现，这些都是地图应用开发中的核心知识点。通过深入理解和实践这些示例代码，开发者可以灵活构建自己的...
- 地图图层管理：高德地图允许开发者添加自定义图层，例如叠加覆盖物（Overlay）来显示阴影效果。这可能涉及`MapView`的`addOverlay`方法。 - 数据获取：若提示信息需要从服务器获取，开发者需要实现网络请求，如...
高德地图API支持多种功能，如自定义图层、信息窗口、覆盖物、事件监听等，可以满足各种复杂的地图应用场景。在前端开发中，开发者可以通过JavaScript SDK来调用高德地图的功能，实现与地图的交互。 Leaflet则是一个...
这个组件可以继承自高德地图的Marker类，并在其中覆盖默认的行为，比如设置标记的图标、位置、点击事件等。通过props传递数据，我们可以动态地改变标记的样式和位置，以满足不同的需求。 在点标记中，我们还可以...
总的来说，"IOS高德地图官方demo"是一个很好的起点，开发者可以通过它学习到如何在iOS应用中实现基本的地图功能，以及更复杂的特性如路径规划和自定义覆盖物。通过深入研究和实践，开发者能够熟练地利用高德地图SDK...
使用高德地图API的`PolylineOptions`类，我们可以将轨迹数据点转化为折线覆盖物显示在地图上。通过设置颜色、宽度等属性，可以定制轨迹的视觉效果。 4. **实现回放功能** - **动画基础**：Android中的`...
对于加载第三方地图服务，如高德地图，我们需要利用BaseTileLayer基类来扩展并创建自定义图层。 加载高德地图的关键在于获取高德地图的瓦片URL模板。高德地图的瓦片服务通常提供不同级别的缩放级别（zoom levels）...
在高德地图API中，开发者可以创建点标记（Marker）、信息窗口（InfoWindow）以及自定义覆盖物来实现标注功能。例如，你可以用点标记表示商店位置，用信息窗口展示店铺详情，或者用自定义覆盖物展示特定的图形元素。 ...
在Android开发中，集成地图服务是一项常见的需求，而高德地图API提供了丰富的功能，包括定位、路径规划、信息窗口、自定义图层等。在这个项目中，我们将关注如何实现Marker的拖动以及拖动时伴随的圆环范围的动态更新...