总结：react项目中使用地图——以腾讯地图为例

最新推荐文章于 2025-04-12 09:20:10 发布

置顶

弓~长~张

最新推荐文章于 2025-04-12 09:20:10 发布

阅读量5k

点赞数 2

分类专栏： react 腾讯地图文章标签： reactjs 街景地图 javascript

本文链接：https://blog.youkuaiyun.com/weixin_41279326/article/details/116206416

版权

准备工作

需求1：根据地址中文或者经纬度在地图显示对应的坐标点

需求2：搜索地址然后在地图上显示对应的大致路线

需求3：根据地址跳转到本机安装的对应地图APP中，并显示目标位置

由于项目中需要用到地图展示，之前也没用到过地图展示，所以记录一下自己的探索过程，共同成长，互勉！

准备工作

引用地图功能需要引用对应的js包，可以到对应官方文档查看例子，这里就不做多说明。附上链接（https://lbs.qq.com/），然后在官网注册一个账号，创建项目，生成对应的key值，这个时候就可以把对应的key值写在刚才引入的js包链接上，我们项目用到的是umi框架，引入js文件的地方是document.ejs，如果是别的项目自行百度引入的位置。

可以考虑把这个地图封装成组件，然后在需要的地方进引用即可，地图的组件需要用到一个对象TMap。首先，你需要在页面上编写一个div，然后创建地图对象的时候初始在对应的div上，即可展现地图。

// 初始化地图
  function setMap() {
    
    //初始化地图
      map = new TMap.Map(document.getElementById('addressMap'), {
        viewMode: '2D',
      });

      //初始化蒙层
      markerLayer = new TMap.MultiMarker({
        map: map, // 指定地图容器
        // 样式定义
        styles: {
          myStyle: new TMap.MarkerStyle({
            width: 18, // 点标记样式宽度（像素）
            height: 26, // 点标记样式高度（像素）
            anchor: { x: 16, y: 32 }
          }),
          startMarker: new TMap.MarkerStyle({
            width: 25,
            height: 35,
            anchor: { x: 16, y: 32 },
            src: start
          }),
          endMarker: new TMap.MarkerStyle({
            width: 25,
            height: 35,
            anchor: { x: 16, y: 32 },
            src: end
          })
        }
      });
  }

现在你打开页面，已经可以在页面上看到地图了。自此，准备工作已经完成。