高德地图1---地图加载、标记地点、信息窗体

本文介绍了如何使用高德地图的JavaScript API进行地图加载、设置地图属性,以及添加标记和信息窗体的操作。通过示例代码展示了创建地图、设置中心点、缩放级别,以及添加点标记和自定义信息窗体的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

项目需要用到高德地图,故研究了一下高德的jsApi,近几天闲来无事,将其常用功能分类从高德地图API上搬过来,以便日后查阅。
要使用高德就需要有一个高德的key值,并引入其js脚本,这在高德API里就有详细的描述,不做过多赘述。

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script> 
  • 地图加载
    显示地图就要有一个容器去承载地图,使用到高德地图的Map类构造一个地图(详见高德地图API参考手册–地图),在这里只展示我自己常使用的属性及方法。

    【常用属性】

    • layers【Array】:地图图层数组,数组可以是图层 中的一个或多个,默认为普通二维地图。
    • zoom【Number】:地图显示的缩放级别,若center未赋值,地图初始化默认显示用户所在城市范围 (取值范围在(pc上默认为3-18;移动端默认为3-19)以内。P.S 值越小显示区域越大
    • center【LngLat】:地图中心点坐标值(该数据类型为高德地图的一个基础类,其值为一个包含经度、纬度的数组,如 [116.397428, 39.90923]为北京的经纬度)
    • zooms【Array】:地图显示的缩放级别范围(取值范围同zoom,如[3,18])
    • animateEnable【Boolean】:地图平移过程中是否使用动画,默认为true
    • zoomEnable【Boolean】:地图是否可缩放,默认值为true
    • doubleCl
### Vue3 中集成和使用高德地图组件 在 Vue3 项目中集成高德地图组件可以通过引入高德地图的 JavaScript API 并结合 Vue 的组合式 API 来完成。以下是详细的说明以及示例代码。 #### 初始化地图 为了在 Vue3 中初始化高德地图,首先需要加载高德地图的 JS SDK,并创建一个容器用于显示地图[^1]。通过 `onMounted` 生命周期钩子函数,在 DOM 节点挂载完成后执行地图实例化操作。 ```javascript <template> <div id="mapContainer" style="width: 100%; height: 500px;"></div> </template> <script setup> import { onMounted } from 'vue'; let map; onMounted(() => { const script = document.createElement('script'); script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=YOUR_API_KEY'; script.onload = () => { initMap(); }; document.body.appendChild(script); function initMap() { map = new AMap.Map('mapContainer', { zoom: 10, // 设置缩放级别 center: [116.397428, 39.90923], // 设置中心点坐标 }); } }); </script> ``` 上述代码展示了如何动态加载高德地图脚本并初始化地图对象。需要注意的是,需替换 `YOUR_API_KEY` 为实际申请到的高德地图开发者密钥[^2]。 #### 添加标记点 要在地图上添加标记点,可以利用 `AMap.Marker` 类来定义位置信息并与地图绑定。以下是一个简单的例子: ```javascript function addMarker(mapInstance) { const marker = new AMap.Marker({ position: new AMap.LngLat(116.397428, 39.90923), // 经纬度对象 title: '北京', }); mapInstance.add(marker); } initMap().then(() => { addMarker(map); // 在地图初始化后调用此方法 }); ``` 这段代码实现了向已有的地图实例中添加单个标记的功能。 #### 展示信息窗口 当点击某个标记时弹出的信息框称为信息窗 (InfoWindow),它能够提供额外的文字描述或其他交互控件。下面是如何设置这一特性的示范: ```javascript function showInfoWindow(mapInstance, markerPosition) { const infoWindowContent = '<div><strong>欢迎来到这里!</strong></br>' + '</br>这里是您感兴趣的地点。</div>'; const infowindow = new AMap.InfoWindow({ content: infoWindowContent, offset: new AMap.Pixel(0, -30), }); const marker = new AMap.Marker({ position: markerPosition, clickable: true, }); marker.on('click', () => { infowindow.open(mapInstance, marker.getPosition()); }); mapInstance.add(marker); } ``` 该部分逻辑允许用户触发事件查看更详尽的内容。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值