百度地图JavaScript API 的运用

本文介绍了如何在项目中运用百度地图JavaScript API,包括加载API、创建地图实例、设置中心点、拖拽标注、监听标注拖动、自定义标注图标、点击标注弹出信息框及地址解析等功能。通过实例分享,帮助读者理解和实现地图应用。

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

         最近在项目中用到了地图,包含了移动标注修改坐标位置,点击标注弹出提示框等等功能,在这里我就对百度地图的一个简单运用进行分享一下:

1.首先加载百度地图JS,在引用的时候需要用到自己的百度地图ak秘钥,这里我就用*号代替我的秘钥的显示了,各位使用自己的秘钥ak,具体如何生成秘钥ak,详情见百度地图      JavaScriptAPI----->获取秘钥。这里的秘钥指的就是ak码,具体如下:

// 加载百度地图js
var script = document.createElement("script");
script.src = "http://api.map.baidu.com/api?v=2.0&ak=***************" +
    "*********"; //这种方式为v2.0版本的引用方式
document.body.appendChild(script);


2.创建一个地图实例(在创建地图实例的时候,如果报BMap is not defined的话,则证明百度地图的JS还没有加载完成,创建地图实例需要加一个延时setTimeout,当然,也有可能是网络状态不佳):

var mapParam.map = new BMap.Map("baiduMap",{enableMapClick: false});

其中的参数baiduMap是显示地图的dom节点的id,

<div id="baiduMap"></div>

第二个参数enableMapClisk设置为false,意味着当你点击地图上的某个覆盖物时(地铁、公交站,地区等等),不会出现公交、驾驶、等的线路规划窗口,如果不传该参数,默认是能查看线路规划窗口的


3. 设置地图的中心点坐标

    point的参数分别为经度和纬度,centerAndZoom的两个参数,第一个参数是创建的点的坐标。第二个参数是设置地图的缩放级别。然后使用maker方法创建标注,当打开地图时。就能看到标注了

var point = new BMap.Point(longitude, mData.latitude); // 创建点坐标
    mapParam.map.centerAndZoom(point, 18); // 初始化地图,设置中心点坐标和地图级别
var marker= new BMap.Marker(point); // 创建标注
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值