vue项目中引入地图的详细教程

第一步:在项目中安装地图插件

html 复制代码
npm i @amap/amap-jsapi-loader --save  

第二步:创建一个容器 添加id属性 (因为地图必须使用id 不能使用class)

html 复制代码
 <div id="maps"></div>

第三步:给这个容器设置宽高

css 复制代码
#maps {
  width: 100%;
  height: calc(100vh - 400px);
}

第四步:在你写的页面引入高德地图

javascript 复制代码
import AMapLoader from "@amap/amap-jsapi-loader";

第五步:加载地图

javascript 复制代码
AMapLoader.load({
  key: "你的key值",
  version: "2.0",
})
  .then((AMap) => {
    // 调用地图渲染函数
    renderMap(AMap);
  })
  .catch((e) => {
    console.error(e); //加载错误提示
  });

第六步:创建地图渲染函数,之后地图的内容都需要写在这个函数中

javascript 复制代码
const renderMap = (AMap) => {
  const map = new AMap.Map("maps");
};

第七步;设置地图的中心点和级别

javascript 复制代码
const renderMap = (AMap) => {
  const map = new AMap.Map("maps", {
    zoom: 12,
    center: [113.978255, 35.281454],
    showIndoorMap: false,
  });
};

第八步:设置点标记到地图里

javascript 复制代码
  let Marker = new AMap.Marker({
    position: new AMap.LngLat(113.978255, 35.281454),
    icon: "https://pic.imgdb.cn/item/652a9187c458853aefe93f88.png",
    offset: new AMap.Pixel(-13, -30),
  });

  map.add(Marker);

最后一步:标记点点击事件 在事件中设置信息弹窗

javascript 复制代码
 Marker.on("click", () => {
    let infoWindow = new AMap.InfoWindow({
      content: `
        <div style="padding:10px;width:200px;">
            <h2 style="font-size:16px;line-height:30px;">中国建设银行</h2>
            <span style="font-size:14px;line-height:20px;">电话:136****5865</span>
            <p style="font-size:15px;">地址:河南省新乡市红旗区XXX 中国建设银行</p>
        </div>
      `,
      offset: new AMap.Pixel(3, -25),
    });

    infoWindow.open(map, [113.978255, 35.281454]);
  });

原创作者:吴小糖

创作时间:2023.10.16

相关推荐
庸俗今天不摸鱼20 分钟前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX1873020 分钟前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下27 分钟前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox37 分钟前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞40 分钟前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行40 分钟前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_5937581041 分钟前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周44 分钟前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队1 小时前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei2 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯