html百度地图标记图标,百度地图开发之点击地图给该位置添加标注(图标)并弹出对应的位置...

本文介绍了如何通过JavaScript在HTML页面上集成百度地图,包括地图初始化、中心点设置、缩放级别控制,以及如何捕捉地图点击事件创建并显示地理位置标注,并利用Geocoder进行地址解析。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.首先要引入自己的ak

2.在html中写出地图的挂载点

3.百度地图JS 的API

var map = new BMap.Map("sitePersonMap"); //new 一个地图对象

var point=new BMap.Point(121.770944, 31.107101); //设置地图的中心点

var zoom=16; //设置地图的等级

map.centerAndZoom(point, zoom); // 在地图中显示

map.enableScrollWheelZoom(); //启用滚轮放大缩小

map.enableContinuousZoom(); //启用地图惯性拖拽,默认禁用

var geoc = new BMap.Geocoder();

map.addEventListener("click",function(e){ //给地图添加点击事件

map.clearOverlays();

console.log(e);

var lng=e.point.lng;

var lat=e.point.lat;

//创建标注位置

var pt = new BMap.Point(lng, lat);

var myIcon = new BMap.Icon("./img/icon_address.png", new BMap.Size(100,100));

var marker2 = new BMap.Marker(pt,{icon:myIcon}); // 创建标注

map.addOverlay(marker2); // 将标注添加到地图中

//alert(e.point.lng + "," + e.point.lat);

geoc.getLocation(pt, function(rs){

var addComp = rs.address;

alert("当前位置是:"+addComp);

console.log(rs)

});

});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值