百度地图API的两种加载方式

1. 同步加载

直接在页面中使用script标签,引入api地址即可,如下:

<script src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥" type="text/javascript"></script>

2. 异步加载(推荐)

引入api地址的时候添加callback回调参数,当脚本加载完成后callback函数会被立刻调用,如下:

function loadBaiDuScript() {

    var script = document.createElement("script");

    script.src = "http://api.map.baidu.com/api?v=2.0&ak=您的密钥&callback=initializeMap";

    document.body.appendChild(script);

}

function initializeMap() {

    // 此处编写百度地图的初始化代码

}

调用方式:

window.onload = loadBaiDuScript;

或者jquery方式

$(function(){

    loadBaiDuScript();

});

其中,initializeMap为回调函数名称,名字可以自定义。

Tips:同步加载,在网络环境不好的情况下,很可能会阻塞其它静态资源的加载。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
GEOJSON 数据到百度地图中,可以使用百度地图开放平台提供的 `GeoJSON` 类库。下面是一个简单的示例,展示如何 GEOJSON 数据并在地图上显示。 首先,需要在 HTML 文件中添百度地图的 JavaScript API: ```html <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK"></script> ``` 其中,`你的AK` 需要替换成你在百度地图开放平台申请的密钥。 然后,在 JavaScript 文件中,可以使用 `GeoJSON` 类库 GEOJSON 数据,并在地图上绘制相应的图形: ```javascript // 创建地图 var map = new BMap.Map("mapContainer"); // 设置地图中心和缩放级别 var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); // GEOJSON 数据 var geojson = new BMap.GeoJSON(); // 定义 GEOJSON 数据源 var url = "your_geojson_url"; // 数据源,并在地图上绘制图形 geojson.load(url, function (geojson) { map.addOverlay(geojson); }); ``` 其中,`your_geojson_url` 需要替换成你的 GEOJSON 数据源的 URL。数据源后,可以调用 `addOverlay` 方法将 GEOJSON 数据绘制在地图上。 需要注意的是,由于百度地图的坐标系与 GEOJSON 的坐标系不同,因此需要将 GEOJSON 数据中的坐标进行转换。可以在 `load` 方法中传入一个回调函数,对数据进行转换。 ```javascript // GEOJSON 数据,并进行坐标转换 geojson.load(url, function (geojson) { geojson.eachOverlay(function (overlay) { if (overlay instanceof BMap.Marker) { var point = overlay.getPosition(); var lng = point.lng; var lat = point.lat; overlay.setPosition(new BMap.Point(lng, lat)); } else if (overlay instanceof BMap.Polygon || overlay instanceof BMap.Polyline) { var path = overlay.getPath(); var newPath = []; for (var i = 0; i < path.length; i++) { var point = path[i]; var lng = point.lng; var lat = point.lat; newPath.push(new BMap.Point(lng, lat)); } overlay.setPath(newPath); } }); map.addOverlay(geojson); }); ``` 在这个示例中,我们遍历了 GEOJSON 数据中的每一个图形,对坐标进行了转换。对于点(Marker)和线(Polyline)来说,只需要将经度和纬度交换即可;对于面(Polygon)来说,需要将面的每个点都进行转换。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值