高德地图简单实现点标，和区域绘制

苹果电脑的鑫鑫

于 2024-06-10 21:01:18 发布

阅读量447

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/Wx001214/article/details/139582093

版权

高德地图开发文档:https://lbs.amap.com/api/javascript-api/guide/abc/quickstart
百度搜索高德地图开发平台
注册高德地图开发账号
在应用管理中
我的应用中
添加一个Key

点击提交

进入高德地图开发文档:https://lbs.amap.com/api/javascript-api/guide/abc/quickstart
在index引入<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
您申请的key值=26d0446e4c9df4e9805caa322f24bf92 （这个key 就是刚刚申请拿到的）
然后进行渲染

在index中引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=26d0446e4c9df4e9805caa322f24bf92&plugin=AMap.MouseTool"></script>
画图工具 &plugin=AMap.MouseTool

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=26d0446e4c9df4e9805caa322f24bf92&plugin=AMap.MouseTool"></script> 


    <title>Vite App</title>

  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>

  </body>
</html>

vue

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

<script>
export default {
  //不能写在created里  不然会渲染不出来
  mounted() {
    //文档快速上手中
    //创建一个对象
    //让地图显示到页面上
    var map = new AMap.Map("container", {
      zoom: 11, //级别    缩放比例  3-17
      center: [116.397428, 39.90923], //中心点坐标
      // pitch:75, // 地图俯仰角度，有效范围 0 度- 83 度
      viewMode: "3D", //使用3D视图
    });

    //地图上的点
    // 创建 AMap.Icon 实例：
    var icon = new AMap.Icon({
      size: new AMap.Size(20, 20), // 图标尺寸
      //更换成自己的图标
      image: "src/assets/a1.png", // Icon的图像
      imageSize: new AMap.Size(20, 20), // 根据所设置的大小拉伸或压缩图片
    });
    var marker = new AMap.Marker({
      position: new AMap.LngLat(116.39, 39.9),
      title: "北京",
      icon: icon, // 添加 Icon 实例
      extData: { id: 123456 }, //存储一个数据 如第点击位置的信息
    });
    map.add(marker);

    //点击marker
    marker.on("click", function (e) {
      // console.log(this);
      //点击图标进行修改图标大小
      this.setIcon(
        new AMap.Icon({
          size: new AMap.Size(20, 20),
          image: "src/assets/a2.png",
          imageSize: new AMap.Size(20, 20),
        })
      );
    });


    //高德地图上画区域
    //高德地图上画图形
    this.mouseTool = new AMap.MouseTool(map)//获取绘图工具
    //rectangle 现在是一个长方形
    this.mouseTool.rectangle();//开启绘图模式

    //断marker点在不在我们绘制的图形中
   this.mouseTool.on("draw",(type)=>{
    // console.log("结束绘制")

    let paths = type.obj.getPath();//获取绘制的覆盖物坐标集合
    // console.log(paths) //拿到绘制图形的四个坐标

    //辅助计算函数
    //AMap.GeometryUtil.isPointInRing 判断坐标是否在这个矩形中
    var isPointInRing = AMap.GeometryUtil.isPointInRing(
      marker.getPosition(),
      paths


    );
    // console.log(isPointInRing);



   })






  },
};
</script>
<style>
#container {
  width: 800px;
  height: 500px;
  margin-left: 50%;
  margin-top: 58%;
  transform: translate(-50%, -50%);
}
</style>

苹果电脑的鑫鑫

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
高德地图简单实现点标，和区域绘制

在index中引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>进入高德地图开发文档:https://lbs.amap.com/api/javascript-api/guide/abc/quickstart。高德地图开发文档:https://lbs.amap.com/api/javascript-api/guide/abc/quickstart。
复制链接

扫一扫