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

<!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>

运行效果

高德地图API 简单使用的更多相关文章

  1. 【高德地图API】如何解决坐标转换，坐标偏移？

    http://bbs.amap.com/thread-18617-1-1.html#rd?sukey=cbbc36a2500a2e6c2b0b19115118ace519002ff3a52731f13 ...

  2. 【高德地图API】一句话搞定webmap（一）——轻地图组件

    原文:[高德地图API]一句话搞定webmap(一)——轻地图组件 摘要: 遥想当年,在APP中加入LBS元素相当困难:要刻苦学习java,要刻苦学习iOS开发,要刻苦学习javascript…… 而 ...

  3. 【高德地图API】从零开始学高德JS API（五）路线规划——驾车|公交|步行

    原文:[高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行 先来看两个问题:路线规划与导航有什么区别?步行导航与驾车导航有什么区别? 回答: 1.路线规划,指的是为用户提供3 ...

  4. 【高德地图API】从零开始学高德JS API（三）覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物

    原文:[高德地图API]从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在 ...

  5. 【高德地图API】从零开始学高德JS API（一）地图展现——仙剑地图，麻点图，街景，室内图

    原文:[高德地图API]从零开始学高德JS API(一)地图展现——仙剑地图,麻点图,街景,室内图 摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧.在过去,marker大于 ...

  6. 【高德地图API】如何制作自己的旅游地图？

    原文:[高德地图API]如何制作自己的旅游地图? “旅行的梦想并不遥远,只要一颗流浪四方的心.”——唐人立. 最早认识唐人立的时候,他还是大二的学生.他独自完成了“南京20年规划地图”.几年前,他完成 ...

  7. 安卓---高德地图API应用

    说明:定位需要导入android_location 的jar包,如果没有会报错,这个官方网站好像找不到,这是我在网上找到的一个链接 http://download.csdn.net/detail/ra ...

  8. 微信小程序-基于高德地图API实现天气组件(动态效果)

    微信小程序-基于高德地图API实现天气组件(动态效果) ​ 在社区翻腾了许久,没有找到合适的天气插件.迫不得已,只好借鉴互联网上的web项目,手动迁移到小程序中使用.现在分享到互联网社区中,帮助后续有 ...

  9. 高德地图API中折线polyline不能跨越180度经度线的解决方案

    1.问题 最近在使用高德地图的API,有一个需求是画出对象的历史轨迹,采用了高德地图API中的折线polyline函数.但如果需要跨180度经度线的折线,会出现不能跨越的情况,如下图所示: 图中有三个 ...

随机推荐

  1. submit text3常用快捷键

    在网上找了一些submit text的快捷键: Ctrl+D 选词 (反复按快捷键,即可继续向下同时选中下一个相同的文本进行同时编辑)Ctrl+G 跳转到相应的行Ctrl+J 合并行(已选择需要合并的 ...

  2. Autofac - 生命周期

    实例生命周期决定在同一个服务的每个请求的实例是如何共享的. 当请求一个服务的时候,Autofac会返回一个单例 (single instance作用域), 一个新的对象 (per lifetime作用 ...

  3. 体验报告：微信小程序在安卓机和苹果机上的区别

    很多人可能会问:微信小程序和在微信里面浏览一个网页有什么区别? 首先,小程序的运行是全屏的,界面跟进入了一个APP很像,更为沉浸跟在微信里面访问h5不一样:其次,它的浏览体验更为稳定. 不过,这还不够 ...

  4. iOS之绘制虚线

    /*   ** lineFrame:     虚线的 frame   ** length:        虚线中短线的宽度   ** spacing:       虚线中短线之间的间距   ** co ...

  5. Android程序中--不能改变的事情

    有时,开发人员会对应用程序进行更改,当安装为以前版本的更新时出现令人惊讶的结果 - 快捷方式断开,小部件消失或甚至根本无法安装. 应用程序的某些部分在发布后是不可变的,您可以通过理解它们来避免意外. ...

  6. [Hadoop in Action] 第7章 细则手册

    向任务传递定制参数 获取任务待定的信息 生成多个输出 与关系数据库交互 让输出做全局排序   1.向任务传递作业定制的参数        在编写Mapper和Reducer时,通常会想让一些地方可以配 ...

  7. OpenGL ES: Array Texture初体验

    [TOC] Array Texture这个东西的意思是,一个纹理对象,可以存储不止一张图片信息,就是说是是一个数组,每个元素都是一张图片.这样免了频繁地去切换当前需要bind的纹理,而且可以节省系统资 ...

  8. SEO：权重如何做到从0到1

    SEO:权重如何做到从0到1 [写于2016年9月]我真的好久好久没到我的博客上去看过了,今天突然登上 seo.chinaz.com,搜索 dkplus.iteye.com,发现自己的博客在百度收录中 ...

  9. js格式化日期

    /** *对日期进行格式化, * @param date 要格式化的日期 * @param format 进行格式化的模式字符串 * 支持的模式字母有: * y:年, * M:年中的月份(1-12), ...

  10. [学习笔记]JavaScript之函数式编程

    欢迎指导与讨论:) 前言 函数式编程能使我们的代码结构变得简洁,让代码更接近于自然语言,易于理解. 一.减少不必要的函数嵌套代码 (1)当存在函数嵌套时,若内层函数的参数与外层函数的参数一致时,可以这 ...