项目需求：标注一个或者两个点、显示信息窗体、自定义icon

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="chrome=1">

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

    <style type="text/css">

      body,html,#container{

        height: %;

        margin: 0px;

        font-family: "微软雅黑"

      }

      .content{

          padding-right: 5px;

        color: #;

        line-height: 23px;

        font-size: 14px;

      }</style>

    <title>定位</title>

  </head>

  <body>

   <div id="container" tabindex=""></div>

   <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=申请的key"></script>

   <script type="text/javascript">

        var pt1=${pt1};

        var pt2=${pt2};

        var location1 = "上海市盛夏路666号";

        var location2 = "上海市南京西路";

        //初始化地图对象，加载地图

        var mapObj = new AMap.Map('container',{

            resizeEnable: true,

        });

        //实例化marker pt为经纬度，infoTest为信息窗体显示文案，iconSrc为标注图标路径

        function addMarker(pt,infoText,iconSrc){

            marker=new AMap.Marker({

                //标注图标

                icon:new AMap.Icon({

                    imageSize:new AMap.Size(,),

                    size:new AMap.Size(,),

                    image:iconSrc

                })

            });

            marker.setMap(mapObj);

            marker.setPosition(pt);

            //信息窗体内容

            var infowindow = new AMap.InfoWindow({

                content: '<div class="content">'+infoText+'</div>',

                offset: new AMap.Pixel(, -)

            });

            //标注点击时显示信息窗体

            marker.on('click',function(e){

              infowindow.open(mapObj,e.target.getPosition());

            });

            infowindow.open(mapObj,marker.getPosition());

        };

        //地图工具条插件、地图比例尺插件

        AMap.plugin(['AMap.ToolBar','AMap.Scale'],function(){

            var toolBar = new AMap.ToolBar();

            var scale = new AMap.Scale();

            mapObj.addControl(toolBar);

            mapObj.addControl(scale);

        });

        //添加点标记

        if(pt1 != ''){

            addMarker(pt1,location1,"/resources/img/endIcon.png");

            if(pt2 != ''){

                //设置地图到合适的视野级别

                mapObj.setFitView();

            }else{

                //设置地图缩放比例

                mapObj.setZoom();

                //设置地图中心

                mapObj.setCenter(pt1);

            }

        };

        if(pt2 != ''){

            addMarker(pt2,location2,"/resources/img/signInIcon.png");

            if(pt1 != ''){

                //设置地图到合适的视野级别

                mapObj.setFitView();

            }else{

                //设置地图缩放比例

                mapObj.setZoom();

                //设置地图中心

                mapObj.setCenter(pt2);

            };

        };

       </script>

  </body>

</html>

高德地图JavaScript开发的更多相关文章

  1. 高德地图JavaScript API开发研究

    高德地图JavaScript API是一套用JavaScript 语言编写的应用程序接口,可以通过各种API接口向地图添加内容,创建功能丰富.交互性强的地图应用.高德地图JavaScript API ...

  2. 高德地图 JavaScript API 开发系列教程（二）

    上节简单介绍高德地图JavaScript API及网页中基本地图展示.有了地图后我们可以用来做什么?有人说离我最近的超市在哪里,我怎么去?别急,这些功能我们后面都会慢慢实现.今天为大家详细讲解如何在地 ...

  3. 高德地图 JavaScript API 开发系列教程（一）

    高德地图 API 提供包括 Web API 即 JavaScript API,Android API,定位API,IOS API,WP API,Win8 API等,本系列教程主要针对高德 JavaSc ...

  4. 百度地图JavaScript开发入门先知

    最近项目紧急开发了一些百度地图的功能,觉得百度地图实数强大!于是今天不忙总结一下,看到不错的文章先转载. 文章出处:https://www.opengps.cn/Blog/View.aspx?id=1 ...

  5. 高德地图API开发二三事（一）如何判断点是否在折线上及引申思考

    最近使用高德地图 JavaScript API 开发地图应用,提炼了不少心得,故写点博文,做个系列总结一下,希望能帮助到LBS开发同胞们. 项目客户端使用高德地图 JavaScript API,主要业 ...

  6. 高德地图Javascript API设置域名白名单

    在涉及到GPS地图相关应用的开发过程中,我们需要在高德开放平台注册相应的账号,并设置好相应应用来获取调用的Key值,该Key值直接放入到网站前端页面,针对任何人来说都可看到,因此我们防止他人盗用你的K ...

  7. web端高德地图javascript API的调用

    [转载https://www.cnblogs.com/zimuzimu/p/6202244.html]web端高德地图javascript API的调用 关于第三放地图的使用,腾讯.百度.高德 具体怎 ...

  8. 【原创】web端高德地图javascript API的调用

    关于第三放地图的使用,腾讯.百度.高德 具体怎么选择看你自己怎么选择了. 高德地图开放平台:http://lbs.amap.com/ 本次使用的是高德的javascript API http://lb ...

  9. 关于高德地图Android开发时地图只显示一次、第二次打开不定位的解决办法

    我按照高德官方Demo改的 第一次是可以定位的,如左图 第二次就不能定位了,如右图 在onDestory中把aMap置为空即可 aMap = null; 修改完如下图: 原理是第二次打开时aMap不为 ...

随机推荐

  1. 对于前端JS、Html、CSS的大小、位置是否影响网站的相应时间

    1.页面中大量的注释代码.空行会影响页面的加载速度 尽量去除打断的注释代码,及空行:尽可能的使用压缩后的JS.CSS文件,太小的文件没必要压缩 2.有人说CSS样式放在页面的开头,JS文件放在页面的结 ...

  2. linux 下链接无线网络

    无线网卡配置此页由Linux Wiki用户Chenxing于2008年11月27日 (星期四) 09:28的最后更改. 在1233456的工作基础上.本文介绍在Linux命令行界面中手动配置无线网卡的 ...

  3. 捷波朗 jabra BT3030 蓝牙耳机

    蓝牙版本V2.0 通话时间 8小时 按键说明:轻敲 快按轻敲两下 在1.5秒内快速按两下按 大约 1秒钟按住 大约 4秒钟 充电提示绿灯闪亮 正在充电持续绿灯 已完全充满电 检查电量按 音量上调(+) ...

  4. Monkey的ADB命令简单使用示例和解析

    进行简单的压力测试: 1. adb shell monkey –p 包名 –v-v 3000 >E:\bugLog.txt -v -v 标识打印的日志的详细级别为2级,更高级有3级,也可以用1级 ...

  5. 161228、Java IO流读写文件的几个注意点

    平时写IO相关代码机会挺少的,但却都知道使用BufferedXXXX来读写效率高,没想到里面还有这么多陷阱,这两天突然被其中一个陷阱折腾一下:读一个文件,然后写到另外一个文件,前后两个文件居然不一样? ...

  6. Weblogic AdminServer启动失败，<Security> <BEA-090870> <The realm "myrealm" failed to be loaded

    服务器重装,环境配置正常,domain没有变动,启动AdminServer失败. AdminServer_log: <2016-9-29 上午09时43分12秒 GMT+08:00> &l ...

  7. Linux上从Java程序中调用C函数

    原则上来说,"100%纯Java"的解决方法是最好的,但有些情况下必须使用本地方法.特别是在以下三种情况: 需要访问Java平台无法访问的系统特性和设备: 通过基准测试,发现Jav ...

  8. base64与byte[]之间转换

    主要是根据BASE64Encoder 和BASE64Decoder 进行操作实现,具体例子如下: BASE64Encoder encode = new BASE64Encoder(); //将byte ...

  9. svn: 期望文件系统格式在“1”到“4”之间；发现格式“6”

    svn 客户端浏览的时候出现了这个提示,经查,发现是Subversion 1.7 < TortoiseSVN 1.8导致的,需要更换版本,应该是 Version(Subversion) > ...

  10. Unity中各类物理投射性能横向比较

    最近在优化摄像机部分代码,抽了个时间对物理投射这块进行了系统性的测试,发现了不少东西 测试工程下载地址: http://files.cnblogs.com/files/hont/RaycastTest ...