百度地图jsApi的使用

站长

2022年12月10日 18:04 · 阅读数 12

可视化的业务当中，除了我们熟悉的各种图标，柱状图、饼状图、折线图等等，地图这类也是可视化的重要的一部分，这部分要么使用百度要么使用高德，其API的学习成本还是比较高的，这一篇我们主要来看一下简单的使用，本人也是一直在学习中，有任何问题或写的不得当的地方希望能一起交流~

准备工作我们需要注册一个账号，按照准备工作这里面的流程，这里需要注意的是，个人和企业，一般自己开发肯定就注册个人的就可以，公司一般都有公司的账号的，我自己是注册的个人的写demo。

百度地图jsApi的使用我这里注册好了已经，账号也有了，增加key 的话，就是我的应用这里，右上角，创建应用~ key 的名称就自己随便起就好了，根据自己的需求来就行，服务平台一般都是使用JS API ，如果自己有其他业务需求的话，再自行查看就好了，不过大部分都是这个 JS API 的，选中这个以后下面的选项就没有了百度地图jsApi的使用

接下来就是代码了，这里面有一些坑，大家也有可能踩过不同的坑，欢迎留言一起探讨~ 我这里没有使用工程化环境或者框架，直接一个 HTML 文件，方便展示，后面的话我可能会拆分一下js文件出来，大家有空可以到我的代码仓库里clone下来点击查看地址，后面慢慢更新中，这里是 html 代码

<body>
  <div id="root">
    <div>
      <h3>添加选点请输入坐标</h3>
      <label>
        经度：
        <input>
      </label>
      <label>
        纬度：
        <input>
      </label>
      <button class="btn">输入完成</button>
      <button class="btn">清空输入</button>
    </div>
    <div id="container"></div>
  </div>
</body>

下面是 script 脚本，脚本尽量放早 body 上面~，这里需要注意的是插件的引用，我这里直接用在了 src 上面，实际上不仅仅这一种引入方式，插件的引用可以有异步和同步，文档连接

<script type="text/javascript">
  window._AMapSecurityConfig = {
    securityJsCode: '安全密钥',
  }
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=注册时候的key&plugin=AMap.MouseTool"></script>
<script src="https://webapi.amap.com/loader.js"></script>

下面来看最主要的 js 代码, 主要注意的点我都已经写到了注释里面了，欢迎食用~

  // 上来就显示的中心点  北京 116.397, 39.918
  var lnglat = new AMap.LngLat(105, 38);

  var map = new AMap.Map('container',
  {
    zoom: 4.8,
    center: lnglat
  });

  map.clearMap(); // 清除地图覆盖物
  // 地图是否可拖拽和缩放
  map.setStatus({
    dragEnable:false, // 是否可拖拽 
    zoomEnable:true  // 是否可缩放
  })

  var markers = [
  {
    icon: '',
    position: [110.205467, 39.907761]
  },
  {
    position: [100, 39]
  },
  {
    // 可以配置 icon 替换点标记的图标, 可以使用在线的 也可以使用本地的
    // icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-2.png',
    position: [116.368904, 39.913423]
  }
  ];
  // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
  markers.forEach(function (marker)
  {
    //创建右键菜单
    var contextMenu = new AMap.ContextMenu();

    //右键放大
    contextMenu.addItem("放大一级", function ()
    {
      map.zoomIn();
    }, 0);

    //右键缩小
    contextMenu.addItem("缩小一级", function ()
    {
      map.zoomOut();
    }, 1);

    contextMenu.addItem("选中当前位置", function ()
    {
      console.log(marker);
    });


    var markerd = new AMap.Marker(
    {
      map: map,
      icon: marker.icon,
      position: [marker.position[0], marker.position[1]],
    });

    //绑定鼠标右击事件——弹出右键菜单
    markerd.on('rightclick', function (e)
    {
      contextMenu.open(map, e.lnglat);
    });
  });

  //创建右键菜单
  var menu = new ContextMenu(map);

  //自定义菜单类
  function ContextMenu(map)
  {
    var me = this;

    //地图中添加鼠标工具MouseTool插件
    this.mouseTool = new AMap.MouseTool(map);

    this.contextMenuPositon = null;

    var content = [];

    content.push("<div class='info context_menu'>");
    content.push("  <p onclick='menu.delMarkerMenu()'>移除上次选中信息</p>");
    content.push("</div>");

    //通过content自定义右键菜单内容
    this.contextMenu = new AMap.ContextMenu({ isCustom: true, content: content.join('') });

    //地图绑定鼠标右击事件——弹出右键菜单
    map.on('rightclick', function (e)
    {
      me.contextMenu.open(map, e.lnglat);
      me.contextMenuPositon = e.lnglat; //右键菜单位置
    });
  }


  ContextMenu.prototype.delMarkerMenu = function ()
  { //右键菜单添加Marker标记
    this.mouseTool.close();

    this.contextMenu.close();
  };

  // menu.contextMenu.open(map, lnglat);  初始化就会显示右键菜单

  // 设置线
  var path1 = [
        [110.205467, 39.907761],
        [116.368904, 39.913423],
    ];
  var polyline1 = new AMap.Polyline(
  {
    path: path1, // 设置线覆盖物路径
    // showDir: true,  设置线方向
    strokeColor: '#3366bb', // 线颜色
    strokeWeight: 6 // 线宽
  });
  map.add([polyline1])

那上面的代码实现的一个效果是什么呢？请看图：这里的话，已经有了点和线，最终想要实现的就是左边输入经纬度，可以在右侧地图新增带你，然后右侧我们右键点击第一个点可以选中，点击第二个点，可以将这两个点连成线，现在这两部分功能还没有实现，让我们在下一期拭目以待~