百度地图基础案例

 <script type="text/javascript" 
  src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=cXG18I5SNt2EZNvG7CVyE4jjTr8swlo4"
  ></script>
  // 这个引入的ak要自己申请一个百度地图开发者账号,可以通过下面这个网址点进去
  https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/helloworld
  

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript" 
  src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=cXG18I5SNt2EZNvG7CVyE4jjTr8swlo4"
  ></script>
  <style>
    html{
      height: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    body{
      height: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #map{
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    .anchorBL, .BMap_cpyCtrl{
display: none;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    console.log(window.BMapGL);
    var map = new BMapGL.Map('map') // 初始化地图
    var point = new BMapGL.Point(116.404,39.915) // 设置地图坐标
    map.centerAndZoom(point, 10) // 中心的 地图的显示级别 
    map.enableScrollWheelZoom(true) // 通过滚轮对地图进行放大和缩小
  </script>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是Flutter整合百度地图的简单案例: 首先,在Flutter中使用百度地图需要引入`flutter_baidu_mapapi_base`和`flutter_baidu_mapapi_map`这两个插件,可以在`pubspec.yaml`文件中添加如下代码: ```yaml dependencies: flutter_baidu_mapapi_base: ^2.0.0 flutter_baidu_mapapi_map: ^2.0.0 ``` 接着,在需要使用地图的页面中,引入百度地图API: ```dart import 'package:flutter_baidu_mapapi_base/flutter_baidu_mapapi_base.dart'; import 'package:flutter_baidu_mapapi_map/flutter_baidu_mapapi_map.dart'; ``` 然后,在页面的`build`方法中添加一个`BaiduMap`组件,用于展示地图: ```dart @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('百度地图'), ), body: BaiduMap( initialCameraPosition: CameraPosition( target: LatLng(39.914935, 116.403119), zoom: 12, ), ), ); } ``` 在上面的代码中,我们设置了地图的初始位置和缩放级别。这里的`LatLng`表示地图上的一个点,可以根据实际需要设置。 最后,在`AndroidManifest.xml`文件中添加如下代码,用于配置百度地图的AK(密钥): ```xml <meta-data android:name="com.baidu.lbsapi.API_KEY" android:value="your_app_key" /> ``` 需要注意的是,百度地图的AK需要根据实际情况申请,具体可以参考百度地图开发文档。 这样,一个简单的Flutter整合百度地图案例就完成了。当然,这只是一个最基础的示例,如果需要更多的功能,还需要进一步学习和掌握百度地图API的使用方法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值