nuxt3开发官网添加高德地图定位

苏小小呀

已于 2024-05-21 09:41:27 修改

阅读量235

点赞数 3

文章标签：前端前端框架 vue.js typescript

于 2024-05-21 09:41:13 首次发布

本文链接：https://blog.csdn.net/m0_50170396/article/details/139080421

版权

高德地图+nuxt3

这是写在页面中的

// 地图
const map = ref();
onMounted(() => {
    let map = new AMap.Map('map-content', {//地图容器id名称
        zoom: 20,//控制地图首次展示时的缩放等级
        center: [117.17, 31.52],
    });
    // let marker = new AMap.Marker({
    //     title: '公司',
    //     position: [117.15, 31.86], // 位置
    //     icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png',
    // })
    // map.add(marker)
	//给地图添加中心点点位
    const marker = new AMap.Marker({
        position: [117.17, 31.52],
        map: map,
    });
    const icon = new AMap.Icon({//添加定位点图片，并设置图片的偏移度
        size: new AMap.Size(50, 50),
        image: 'https://pic.mksucai.com/00/03/29/2b2223e7f4f362aa.webp',
        imageOffset: new AMap.Pixel(0, 0),
        imageSize: new AMap.Size(50, 50),
        // icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png',
    })
    // 设置标记的样式
    marker.setIcon(icon);
    marker.setLabel({
        content: 'XXX有限公司',
        offset: new AMap.Pixel(-10, -20),
    });
    map.setFitView();
})

nuxt.config.ts中需要加入高德地图的key

app: {
    head: {
      title: 'XXX网站',//网站地址栏位置的标题
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { name: 'format-detection', content: 'telephone=yes' },//添加移动端调用手机拨号功能
        // { hid: 'description', name: 'description', content: 'My awesome app' }
      ],
      link:[{ rel: 'icon', type: 'image/x-icon', href: '/logo.jpg' }],//地址栏网站icon，可以自定义修改
      script: [
        // { src: "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" }, 
        {type:'text/javascript',src:"https://webapi.amap.com/maps?v=2.0&key=高德地图的key"},
      ]
    },
  },