使用高德地图(点标记)完成vue2项目

目录

前言

官网中的代码

项目中的代码

效果图

 代码

配置


前言

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

这话一说,嗯,心放下一半了,但是当我在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‘

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. 引入高德地图API 在vue3项目中,可以通过在index.html中引入高德地图API的方式来使用高德地图。在head标签中添加以下代码: ```html <script src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德地图key"></script> ``` 其中,key为你在高德开放平台申请的地图应用的key。 2. 在组件中添加地图容器 在组件模板中添加一个div作为地图容器: ```html <template> <div id="map"></div> </template> ``` 3. 初始化地图 在组件中添加一个mounted生命周期钩子,在其中初始化地图: ```javascript mounted() { const map = new AMap.Map("map", { zoom: 13, //地图级别 center: [116.397428, 39.90923], //中心点坐标 }); } ``` 其中,zoom为地图级别,center为地图中心点的经纬度坐标。 4. 添加点标记地图上添加点标记,可以通过AMap.Marker类来实现。在mounted生命周期钩子中添加以下代码: ```javascript const marker = new AMap.Marker({ position: [116.397428, 39.90923], //点标记位置 title: "这是一个点标记", //鼠标悬停时的提示信息 }); marker.setMap(map); //将点标记添加到地图中 ``` 其中,position为点标记的经纬度坐标,title为鼠标悬停时显示的提示信息。 完整代码如下: ```html <template> <div id="map"></div> </template> <script> export default { mounted() { const map = new AMap.Map("map", { zoom: 13, center: [116.397428, 39.90923], }); const marker = new AMap.Marker({ position: [116.397428, 39.90923], title: "这是一个点标记", }); marker.setMap(map); }, }; </script> ``` 运行项目后即可在地图上看到一个点标记

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值