高德地图实现marker标记,Text多点文本标记,标记信息窗体,手动选点功能

原创

已于 2022-04-20 09:56:45 修改 · 4.7k 阅读

标签

#vue.js #前端 #javascript

于 2021-11-06 14:26:51 首次发布

该博客介绍了如何使用高德地图API在Vue环境中创建多点标记并显示信息窗体。通过示例代码展示了如何遍历数据生成标记点，以及监听点击事件展示信息。同时，还提供了手动选点功能，用户可以点击地图选择新的设备经纬度，并弹窗确认设置。

1.marker标记,Text多点文本标记,标记信息窗体

效果:

代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
     <!-- vue引入高德地图实现多点标记,点击标记点出现信息窗体 -->
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
</script>
</head>
<body>
  <div id="app">
   <div id="maps" style="width:900px;height: 550px"></div>
  </div>
</body>
      <!-- 获取鼠标点击经纬度 -->
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key&plugin=AMap.Geocoder"></script>
  <script>
    new Vue({
     
     
      el: '#app',
      data: function() {
     
     
        return {
     
      
         tableData: [{
     
     
            equipmentNumber: '3014-341078',
            alarmNumber: '2345',
            equipmentPosition: '中环路1111',
            segmentNumber: '2345678974',
            segmentName: '名称11',
            naturalNumber: '234234234234-67867867',
            naturalName: '中环11',
            equipmentType: '综合检测1',
            latitude: '104.09576',
            longitude: '30.621637',
          },
          {
     
     
            alarmNumber: '345345',
            equipmentPosition: '中环路2222',
            segmentNumber: '2345678974',
            segmentName: '名称22',
            naturalNumber: '234234234234-6786',
            naturalName: '中环22',
            equipmentNumber: '3014-341077',
            equipmentType: '综合检测2',
            latitude: '104.094623',
            longitude: '30.620917'
          }
        ],
         }
      },
       mounted() {
     
     
      this.mapApi();//初始化
    },
      methods:{
     
     
      mapApi(){
     
     
        var map = new AMap.Map("maps", {
     
     
          resizeEnable: true,

最低0.47元/天解锁文章