官网开发碎碎念（二）

最新推荐文章于 2024-07-04 00:59:27 发布

起名时在学Aiifox

最新推荐文章于 2024-07-04 00:59:27 发布

阅读量183

点赞数 7

文章标签：前端 javascript html5 css jquery

本文链接：https://blog.csdn.net/qq_51846847/article/details/139835362

版权

我们大部分官网应该都会用到地图吧？

我这里来写一下我怎么在官网中插入地图吧！

首先肯定是要根据你使用上面地图去对应的地图开放平台申请对应的安全密钥和key.参考文档

在页面中肯定要有一个容器去容纳它，并且给他设置宽高

然后就是js部分了

首先配置安全密钥

 // 配置安全密钥
    window._AMapSecurityConfig = {
      securityJsCode: '',
    }

因为我们要在地图中显示我们公司的位置，所以

实现样式就差不多就这样

 // 加载高德地图API
    AMapLoader.load({
      key: '***', //申请好的Web端开发者 Key，调用 load 时必填
      version: '2.0', //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
    })
      .then((AMap) => {
        // 初始化地图
        const map = new AMap.Map('container', {
          viewMode: '2D', //默认使用 2D 模式
          zoom: 12, //地图级别
          center: [***, ***], //地图中心点
        })
        // 创建自定义大小的标记图标
        var icon = new AMap.Icon({
          size: new AMap.Size(30, 30), // 设置图标尺寸
          image:
            'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', // 图标的 URL
          imageSize: new AMap.Size(30, 30), // 设置图标显示尺寸
        })

        // 创建标记
        var marker = new AMap.Marker({
          icon: icon, //标记的图标
          position: [***, ***], //标记的坐标
        })

        // 添加标记到地图
        map.add(marker)
        // 创建文字标注
        var text = new AMap.Text({
          text: 'xxx', // 显示的文字
          anchor: 'center', // 设置文本标注锚点
          draggable: true,
          cursor: 'pointer',
          style: {
            'background-color': '#fff',
            border: 'solid 1px #0088ff',
            padding: '2px 5px',
            'font-size': '10px',
          },
          position: [***, ***], // 文字标注位置
          offset: new AMap.Pixel(0, -5),
        })

        // 添加文字标注到地图
        map.add(text)
      })
      .catch((e) => {})

嗯，不知道大家有没有懂，有没有帮助到你，最近比较闲，就碎碎念一下，我也是参考了几个文档才实现，希望可以帮助到你