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

<!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. 基于RN开发的一款视频配音APP(开源)

    在如今React.ng.vue三分天下的格局下,不得不让自己加快学习的脚步.虽然经常会陷入各种迷茫,学得越多会发现不会的东西也被无限放大,不过能用新的技术作出一些小项目小Demo还是会给自己些许自信与 ...

  2. jquery.each()

    $(selector).each(function(index,element)) index - 选择器的 index 位置 element - 当前的元素(也可使用 "this" ...

  3. web 前端（轮番插件）

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  4. FineBI：一个简单易用的自助BI工具

    过去,有关企业数据分析的重担都压在IT部门,传统BI分析更多面向的是具有IT背景的人员.但随着业务分析需求的增加,很多公司都希望为业务用户提供自助分析服务,将分析工作落实到业务人员手中.但同时,分析工 ...

  5. click事件的累加绑定，绑定一次点击事件，执行多次

    最近做项目为一个添加按钮绑定点击事件,很简单的一个事情,于是我按照通常做法找到元素,使用jquery的on()方法为元素绑定了点击事件,点击同时发送请求.完成后看效果,第一次点击没有问题.再一次点击后 ...

  6. 在ASP.NET MVC 4 on Mono中使用OracleClient in CentOS 6.x的问题记录

    在ASP.NET MVC 4 on Mono中使用OracleClient in CentOS 6.x的问题记录 前言 最近有个Web项目,业务功能不复杂,但是这个客户(某政府部门)有两个硬性要求:1 ...

  7. 为支持ASP.NET5跨平台，Jexus再添新举措

    Jexus作为一款运行于Linux/FreeBSD平台上,以支持ASP.NET著称的高性能HTTP服务器和反向代理服务器,继5.6版完成对OWIN标准应用的支持后,就把着力点放到了对ASP.NET5的 ...

  8. 【腾讯Bugly干货分享】React Native项目实战总结

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 “8小时内拼工作,8小时外拼成长 ...

  9. 跟Unity3D学代码优化

    今天我们来聊聊如何跟Unity学代码优化,准确地说,是通过学习Unity的IL2CPP技术的优化策略,应用到我们的日常逻辑开发中. 做过Unity开发的同学想必对IL2CPP都很清楚,简单地说,IL2 ...

  10. 使用 SecurityManager 和 Policy File 管理 Java 程序的权限

    参考资料 该文中的内容来源于 Oracle 的官方文档.Oracle 在 Java 方面的文档是非常完善的.对 Java 8 感兴趣的朋友,可以从这个总入口 Java SE 8 Documentati ...