使用高德地图（点标记）完成vue2项目

HQ8806

已于 2023-08-08 16:01:14 修改

阅读量1.7k

点赞数

分类专栏：高德地图文章标签： html 前端 javascript

于 2022-10-02 14:16:35 首次发布

本文链接：https://blog.csdn.net/LJM51200/article/details/127142299

版权

高德地图专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

由于项目中有要使用高德地图的需求，我就傲娇的说，我会使用百度地图，可以改为百度地图不，最终的结果就是要用高德地图，后端小哥哥还特别好的安慰我说，高德地图的用法跟百度地图的用法一样，多看些视频就会了。

这话一说，嗯，心放下一半了，但是当我在vue2项目中，真正的使用时，我发现，我啥也不会，(灬ꈍ ꈍ灬)

官网中的代码

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>默认点标记</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style>
        html, body, #container {
            height: 100%;
            width: 100%;
        }

        .amap-icon img,
        .amap-marker-content img{
            width: 25px;
            height: 34px;
        }

        .marker {
            position: absolute;
            top: -20px;
            right: -118px;
            color: #fff;
            padding: 4px 10px;
            box-shadow: 1px 1px 1px rgba(10, 10, 10, .2);
            white-space: nowrap;
            font-size: 12px;
            font-family: "";
            background-color: #25A5F7;
            border-radius: 3px;
        }

        .input-card{
            width: 18rem;
            z-index: 170;
        }

        .input-card .btn{
            margin-right: .8rem;
        }

        .input-card .btn:last-child{
            margin-right: 0;
        }
    </style>
</head>
<body>
<div id="container"></div>
<div class="input-card">
    <label style="color:grey">点标记操作</label>
    <div class="input-item">
        <input id="addMarker" type="button" class="btn" onclick="addMarker()" value="添加点标记">
        <input id="updateMarker" type="button" class="btn" onclick="updateIcon()" value="更新点标记图标">
    </div>
    <div class="input-item">
        <input id="clearMarker" type="button" class="btn" onclick="clearMarker()" value="删除点标记">
        <input id="updateMarker" type="button" class="btn" onclick="updateContent()" value="更新点标记内容">
    </div>
</div>

// 注意点：key是你在高德开放平台 自己申请的key
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key= 你的key"></script>
<script type="text/javascript">
    var marker, map = new AMap.Map("container", {
        resizeEnable: true,
        center: [116.397428, 39.90923],
        zoom: 13
    });

    // 实例化点标记
    function addMarker() {
        marker = new AMap.Marker({
            icon: "./logo.png",
            position: [116.406315, 39.908775],
            offset: new AMap.Pixel(-13, -30)
        });
        marker.setMap(map);
    }
    function updateIcon() {

        marker.setIcon('/logo.png')
    }

    function updateContent() {

        if (!marker) {
            return;
        }

        // 自定义点标记内容
        var markerContent = document.createElement("div");

        // 点标记中的图标
        var markerImg = document.createElement("img");
        markerImg.className = "markerlnglat";
        markerImg.src = "/logo.png";
        markerImg.setAttribute('width', '25px');
        markerImg.setAttribute('height', '34px');
        markerContent.appendChild(markerImg);

        // 点标记中的文本
        var markerSpan = document.createElement("span");
        markerSpan.className = 'marker';
        markerSpan.innerHTML = "Hi，我被更新啦！";
        markerContent.appendChild(markerSpan);

        marker.setContent(markerContent); //更新点标记内容
        marker.setPosition([116.391467, 39.927761]); //更新点标记位置
    }

    // 清除 marker
    function clearMarker() {

        if (marker) {
            marker.setMap(null);
            marker = null;
        }
    }
</script>
</body>
</html>

前置配置工作

高德开放平台 | 高德地图API (amap.com)

个人账户每天搜索调用额度为 100次而企业账户每天1000次

我们是后管系统选Web端（JS API）

提交成功后弹出提示框

点击

项目中的代码

效果图

代码

首先在 src的同级 public ---> index.html 中添加

<script src = 'https://webapi.amap.com/maps?v=2.0&key=你的key' type="text/javascript" > </script>

其次就是在自己需要的 .vue文件中写

<template>
  <div id="container" />
</template>

<script>
export default {
  mounted() {
    var map = new AMap.Map('container', {
      zoom: 11,
      center: [116.397428, 39.90923], // 中心点坐标
      viewMode: '3D'
    })
    // marker点坐标
    var marker = new AMap.Marker({
      position: new AMap.LngLat(116.39, 39.9), // 经纬度
      title: '北京',
      // 自定义图标以及大小
      // icon:new AMap.Icon({
      //   size:new AMap.Size(50,50),
      //   image:this.filteTreeData(item),
      //   // image:require('../../assets/common/head.jpg') 可以引入自定义图标
      //   imageSize: new AMap.Size(50,50)
      // })
      // 存数据
      extData: { id: 1234 }
    })
    map.add(marker)
    // 点击图标 修改
    marker.on('click', function(e) {
      console.log(this) // 取数据:this.
      // 修改
      this.setIcon(
        new AMap.Marker({
          position: new AMap.LngLat(116.39, 39.9), // 经纬度
          title: '北京'
          // 自定义图标以及大小
          // icon:new AMap.Icon({
          //   size:new AMap.Size(50,50),
          //   image:this.filteTreeData(item),
          //   // image:require('../../assets/common/head.jpg') 可以引入自定义图标
          //   imageSize: new AMap.Size(50,50)
        })
      )
    })
  }
}
</script>
<style scoped lang='scss'>
#container {width:800px; height: 500px; margin-left: 50%; transform: translate(-50%,0); }

</style>

配置

在 .eslintrc.js中配置

 "globals": {
        "AMap": "true",
    },

不这么配置,它会报 ‘AMap‘ is not defined‘

HQ8806

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
使用高德地图（点标记）完成vue2项目

由于项目中有要使用高德地图的需求，我就傲娇的说，我会使用百度地图，可以改为百度地图不，最终的结果就是要用高德地图，后端小哥哥还特别好的安慰我说，高德地图的用法跟百度地图的用法一样，多看些视频就会了。这话一说，嗯，心放下一半了，但是当我在vue2项目中，真正的使用时，我发现，我啥也不会，(灬ꈍ ꈍ灬)
复制链接

扫一扫

专栏目录