高德地图API 简单使用

主要是功能是在地图上添加标记点、在标记点添加相应的内容、单击查看内容、双击直接进入相应的项目系统。

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" /><script src="http://cache.amap.com/lbs/static/es5.min.js"></script><script src="http://webapi.amap.com/maps?v=1.3&key=您的密匙"></script><script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body><div id="container"></div><script type="text/javascript">//初始化地图对象，加载地图var map = new AMap.Map("container", {resizeEnable: true});var lnglats = [[116.368904, 39.923423],[116.382122, 39.921176],[116.387271, 39.922501],[116.398258, 39.914600]];var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });for (var i = 0, marker; i < lnglats.length; i++) {var marker = new AMap.Marker({position: lnglats[i],map: map});marker.content = '桥梁第' + (i + 1) + '座';marker.on('click', markerClick);marker.on('dblclick', markerClickDouble);//  marker.emit('click', {target: marker});
    }function markerClick(e) {infoWindow.setContent(e.target.content);infoWindow.open(map, e.target.getPosition());}function markerClickDouble(e) {alert(e.target.getPosition());}map.setFitView();
</script>
</body>
</html>

运行效果

转载于:https://www.cnblogs.com/w2011/p/5408030.html

高德地图API 简单使用相关推荐

高德地图API简单使用——地名转经纬度
之前小菌也分享过一些经典爬虫的案例,但有小伙伴私聊小菌希望分享一些常用的python技术.于是这篇博客小菌打算分享高德地图简单API的使用. """ @File :高德地 ...
高德地图API简单记录
使用MapView的方式一.引入布局文件 <com.amap.api.maps.MapView xmlns:android="http://schemas.android.c ...
使用高德地图API实现历史轨迹查询
欢迎大家关注我的公众号,有问题可以及时和我交流. 使用高德地图API完成历史轨迹查询创作背景相关技术设计思路实现难点编码实现实现效果创作背景因为对历史轨迹查询比较好奇,所以使用 ...
【学习记录】使用高德地图API开发一个简单基础的WebGIS系统(GIS考研院校专题地图网站)
文章目录 0. 前言 1. 功能设计 2. 数据处理 3. 项目结构 4. 功能实现 4.1. 初始化 4.2. 地图基础功能模块 4.2.1. 放大缩小功能, 图层管理功能 4.2.2. 地图测量功 ...
uniapp使用高德地图api找车位简单案例
功能: 随着地图移动红色标点跟着变化并在其范围内出现最近的10个停车场,并按距离排序. 点击蓝色标点会出现其对应的信息窗口右下角定位功能(点击回到当前所在位置) (因使用静态数据,所以蓝色标点不会刷 ...
高德地图markevents_GitHub - mingxuWang/Map: 高德地图API二次封装
Map组件设计文档组件设计目的分析当前各业务方向(销售端.商城.数据可视化.TMS)内地图相关应用的地图功能使用情况,封装Map组件供给各业务向进行使用. 将高德地图API进行二次封装,降低地图相 ...
html高德地图api使用教程,高德地图API如何使用？
这个很简单,需要先注册一下高德地图开发者,然后创建应用.添加Key,最后通过script标签引入网页,就可以直接使用高德地图API了,下面我简单介绍一下实现过程,主要内容如下: 1.首先,注册高德地图 ...
android高德天气api接口,天气查询-API文档-开发指南-Web服务 API | 高德地图API
产品介绍天气查询是一个简单的HTTP接口,根据用户输入的adcode,查询目标区域当前/未来的天气情况. 使用API前您需先申请Key,若无高德地图API账号需要先申请账号. 适用场景需要使用相关 ...
高德天气 php,天气查询-API文档-开发指南-Web服务 API | 高德地图API
产品介绍天气查询是一个简单的HTTP接口,根据用户输入的adcode,查询目标区域当前/未来的天气情况. 使用API前您需先申请Key,若无高德地图API账号需要先申请账号. 适用场景需要使用相关 ...

高德地图API 简单使用

高德地图API 简单使用相关推荐

最新文章

热门文章