<!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的一个重要特性，...
在百度地图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....
`Infowindow`是地图上的一个浮动视图，通常在点击地图上的标记（Marker）或者覆盖物时显示，用于显示更详细的相关信息。下面我们将深入探讨如何实现高德地图的自定义`Infowindow`功能。 首先，了解`Infowindow`的...
在“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则是一个...
对于加载第三方地图服务，如高德地图，我们需要利用BaseTileLayer基类来扩展并创建自定义图层。 加载高德地图的关键在于获取高德地图的瓦片URL模板。高德地图的瓦片服务通常提供不同级别的缩放级别（zoom levels）...
这个组件可以继承自高德地图的Marker类，并在其中覆盖默认的行为，比如设置标记的图标、位置、点击事件等。通过props传递数据，我们可以动态地改变标记的样式和位置，以满足不同的需求。 在点标记中，我们还可以...
使用高德地图API的`PolylineOptions`类，我们可以将轨迹数据点转化为折线覆盖物显示在地图上。通过设置颜色、宽度等属性，可以定制轨迹的视觉效果。 4. **实现回放功能** - **动画基础**：Android中的`...
总的来说，"IOS高德地图官方demo"是一个很好的起点，开发者可以通过它学习到如何在iOS应用中实现基本的地图功能，以及更复杂的特性如路径规划和自定义覆盖物。通过深入研究和实践，开发者能够熟练地利用高德地图SDK...
在高德地图API中，开发者可以创建点标记（Marker）、信息窗口（InfoWindow）以及自定义覆盖物来实现标注功能。例如，你可以用点标记表示商店位置，用信息窗口展示店铺详情，或者用自定义覆盖物展示特定的图形元素。 ...