Web端地图开发说明

Web端地图开发说明

欢迎关注：xssy5431 小拾岁月
参考链接：https://mp.weixin.qq.com/s/RuY8dBghwOkf5nKdRugamA

一、开发环境

vue3 + 高德 JS API 2.0

二、开发准备

• 根据项目需要，登录账号高德账号
• 申请应用，获取密钥与KEY

三、代码开发

引入高德

1. 文件目录 public\index.html

  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
  <link href="https://a.amap.com/Loca/static/manual/example/style/demo.css" rel="stylesheet">
  
<script async="async" type="text/javascript">
  window._AMapSecurityConfig = {
    securityJsCode: "高德地图密钥",
  };
</script>
<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=高德地图KEY"></script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=高德地图KEY&plugin=Map3D,AMap.DistrictLayer,AMap.Scale,AMap.DistrictSearch,AMap.ToolBar,AMap.PolyEditor,AMap.Object3DLayer">
</script>
<script src="https://webapi.amap.com/ui/1.1/main.js"></script>
<script src="https://webapi.amap.com/loca?v=1.3.2&key=高德地图KEY"></script>

项目应用

1. 创建地图容器

  <div class="project-container">
    <div class="map-box">
      <div class="legend-container">
        <div class="legend-item" v-for="(legend,i) in types" :key="i">
          <div class="legend-circle" :style="{background:legend.color}"></div>
          <div class="legend-name">{{ legend.typeName }}</div>
        </div>
      </div>
      <div class="help-btn" @click="getMapConfig">查看配置信息</div>
      <div class="reset-btn" @click="resetMap">重置</div>
      <div class="tip-btn">缩放：alt / -+</div>
      <div id="project-location" @click="handleClickMap"></div>
    </div>
  </div>

其中<div id="project-location" @click="handleClickMap"></div>为地图容器。

2. 初始化地图

let mapCenter = ref([121.46819, 31.072556])
let mapZoom = ref(10)
let currMapZoom = ref(10)

function initMap() {
  mapInstance.value = new AMap.Map("project-location", {
    zoom: mapZoom.value,
    center: mapCenter.value,
    mapStyle: 'amap://styles/d39bb0888a2e7d9329ff9b5b78751efe',
    resizeEnable: true,
    scrollWheel: false,
  });
}

3. 地图初始化完成

常用方法

• 获取地图上点击位置的经纬度

// 点击地图
function handleClickMap() {
  mapInstance.value.on('click', showInfoClick);
}

// 获取点击点位的经纬度信息
function showInfoClick(e) {
  let text = '您在 [ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ] 的位置单击了地图！'
  console.log(text)
}

• 获取地图的中心点与缩放级别

// 获取地图中心点与缩放级别
function getMapConfig() {
  let zoom = mapInstance.value.getZoom();
  let center = mapInstance.value.getCenter();
  alert(`中心点：[${center.lng},${center.lat}]，缩放级别：${zoom}`)
}

常用API

• 添加标记点 new AMap.Marker()
• 标记区域 new AMap.Polygon()
• ……

五、注意事项

• 高德版本1.3 与 2.0有较大区别，使用是需要注意 兼容性 与 API版本 的对应对应关系。

六、温馨提示

更多博文，请关注：xssy5431 小拾岁月