高德地图 添加标注marker 设置图标大小

new AMap.Marker({
	 // icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
	 // icon: 'img/icon/'+item.mark,
	 icon:new AMap.Icon({            
	     image: 'img/icon/'+item.mark,
	     size: new AMap.Size(22, 28),  //图标所处区域大小
	     imageSize: new AMap.Size(22,28) //图标大小
	 }),        
	 position: [pos.y,pos.x],
	 anchor: 'bottom-center',
	 offset: new AMap.Pixel(0,0)//(-10, -30)
});
### 如何在高德地图API中添加Marker标记 为了在高德地图API中成功创建并显示`Marker`标记,需按照如下方法操作: #### 创建地图实例 首先应当初始化一个地图对象,在此过程中指定容器ID以及中心坐标等参数。 ```javascript var map = new AMap.Map('container', { zoom: 10, center: [116.397428, 39.90923] // 设置地图中心点经纬度 }); ``` #### 构建Marker对象 接着构建一个新的`AMap.Marker`实例,并设置其属性如位置、图标样式等内容[^1]。 ```javascript // 定义marker的位置 var position = new AMap.LngLat(116.391467, 39.927761); // 实例化Marker var marker = new AMap.Marker({ position: position, title: '这是一个测试标记' }); // 将创建好的marker添加至地图上 map.add(marker); ``` 对于已经存在于地图上的标记,无需重复执行上述命令来再次加入集合;如果想要调整现有标记的位置,则可以调用`setPosition()`函数传入新的地理坐标作为参数[^3]。 关于页面布局设计方面的需求实现,比如通过点击输入框触发地图弹窗展示、依据用户输入提供地点建议等功能则涉及到前端框架(例如Vue.js)的具体应用逻辑[^5]。这部分工作通常会结合JavaScript事件监听器完成交互处理流程的设计。 #### 更新视图适应所有覆盖物 当向地图新增加了要素之后,可能希望自动缩放和平移以最佳视角呈现这些新添加的对象给终端使用者查看。此时可利用`setFitView()`接口达成目的,不过需要注意的是该行为针对单个或者少量的常规`Marker`有效,而面对大量数据集时应考虑其他方案因为这不会作用于`AMap.MassMarks`类型的元素之上[^2]。 ```javascript map.setFitView([marker]); ``` 以上就是有关如何运用高德地图Web服务端口实现在线地图界面里增加自定义标注的整体介绍。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值