上节简单介绍高德地图JavaScript API及网页中基本地图展示。有了地图后我们可以用来做什么？有人说离我最近的超市在哪里，我怎么去？别急，这些功能我们后面都会慢慢实现。今天为大家详细讲解如何在地图上留下标记，你可以在地图任意位置添加一个点，也可以把你的位置标记上去。在地图上做一个标记，标记做在哪里，用什么东西做标记是你来决定的。高德JavaScript API提供了点的三个属性{position, icon, map}分别记录点的位置，点的样子，将点放到地图。下面看看如何在地图上做标记吧～

开发指南：http://api.amap.com/Javascript/guide#overlay

参考手册：http://api.amap.com/Javascript/reference#Marker

一、展示地图，详情见上节

 <!DOCTYPE HTML>
 <html>
 <head>
 <style type="text/css">
     html{height: 100%}
     body{height: 100%; margin: 0px; padding: 10px}
     #container{height: 100%}
 </style>
 <script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=申请的key"></script>
 <script language="javascript">
 var mapObj;
 function mapInit(){
     var mapOptions = {
         center: new AMap.LngLat(121.498586,31.239637),
         level: 17
     };
     mapObj = new AMap.Map("container", mapOptions);
 }
 </script>
 </head>
 <body onLoad="mapInit()">
     <div id="container"></div>
 </body>
 </html>

二、标记。

1.position:标记做在哪里？我们需要一个坐标（121.501633,31.238064），用position来记录

position: new AMap.LngLat(121.501633,31.238064),

2.icon:标记做成什么样？我们需要一个联网就可以看到的图片 http://webapi.amap.com/images/marker_sprite.png ，用icon来记录

icon: "http://webapi.amap.com/images/marker_sprite.png",

3.offset:偏移量。下图坐标即屏幕坐标，系统默认将图标的左上角与我们给的坐标对齐（A），但实际上我们是想将图标底部尖尖的部分与坐标对齐（B），将图标移动到B就是通过偏移量来设定。按照屏幕坐标X左移为负，右移为正；Y上移为负，下移为正。我们需要将图标左移8像素即"-8px",上移34像素即"-34px"。

offset: {x:-8, y:-34},

4.map:告诉程序你要把点标记在地图上

map:mapObj

三、打包这四个属性，生成点标

var mar = new AMap.Marker({
        position: new AMap.LngLat(121.501633,31.238064),
        icon: "http://webapi.amap.com/images/marker_sprite.png",
        offset: {x:-8, y:-34},
        map:mapObj
    });

搞定～～～

完整代码

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
    html{height: 100%}
    body{height: 100%; margin: 0px; padding: 10px}
    #container{height: 100%}
</style>
<script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=申请的key"></script>
<script language="javascript">
var mapObj;
function mapInit(){
    var mapOptions = {
        center: new AMap.LngLat(121.498586,31.239637),
        level: 17
    };
    mapObj = new AMap.Map("container", mapOptions);
    var mar = new AMap.Marker({
        position: new AMap.LngLat(121.501633,31.238064),
        icon: "http://webapi.amap.com/images/marker_sprite.png",
        offset: {x:-8, y:-34},
        map:mapObj
    });
    mapObj.setFitView();
}
</script>
</head>
<body onLoad="mapInit()">
    <div id="container"></div>
</body>
</html>

高德地图 JavaScript API 开发系列教程（二）的更多相关文章

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

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

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

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

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

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

  4. Arcgis for Androd API开发系列教程（一）——地图显示与GPS定位

    序:最近呢,工作鸭梨不是怎么大,对于自己爱折腾的想法又冒出了水面,开始自己的android开发的学习之旅.但是呢,本人是做GIS的,所以呢,就打算从这方面入手看看,是不是有什么比较好玩的玩意呢,这才导 ...

  5. C#微信公众号开发系列教程二（新手接入指南）

    http://www.cnblogs.com/zskbll/p/4093954.html 此系列前面已经更新了两篇博文了,都是微信开发的前期准备工作,现在切入正题,本篇讲解新手接入的步骤与方法,大神可 ...

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

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

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

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

  8. 高德地图JS API 开发小结

    项目中有一块功能要用到高德地图,所以,想把编码小结一下. 首先是地图的初始化 var map = new AMap.Map("mapDiv", {                  ...

  9. C#微信公众号开发系列教程六（被动回复与上传下载多媒体文件）

    微信公众号开发系列教程一(调试环境部署) 微信公众号开发系列教程一(调试环境部署续:vs远程调试) C#微信公众号开发系列教程二(新手接入指南) C#微信公众号开发系列教程三(消息体签名及加解密) C ...

随机推荐

  1. 基于Hbase数据的Mapreduce程序环境开发

    一.实验目标 编写Mapreduce程序,以Hbase表数据为Map输入源,计算结果输出到HDFS或者Hbase表中. 在非CDH5的Hadoop集群环境中,将编写好的Mapreduce程序整个工程打 ...

  2. Classes and Objects :类和对象(2)

    类内部可以有另一个类,也就是内部类,如果带static则为静态内部类静态内部类当然不能直接访问实例变量内部类修饰符可以有四种,而外部类只有两种 内部类的意义:这个内部类只适用于这个外部类因为外部类的某 ...

  3. elementary os下anaconda的spyder.desktop文件

    [Desktop Entry] Version=1.0 Type=Application Name=Spyder GenericName=Spyder Comment=Scientific PYtho ...

  4. AIM Tech Round 3

    题目链接:(做出几道说几道^_^) A.Juicer B.Checkpoints C.Letters Cyclic Shift 思路: A题每次加上橘子的体积,超过就清零,计数器加1 B题比较 (lo ...

  5. av_interleaved_write_frame 网络不好的情况下返回较慢

    用libvlc做直播推流引擎在网络较差的情况下,需要关闭直播,并且重新开播.这个过程中,推流引擎重启,需要的是快速响应.实际上测试结果发现,经常会发生引擎关闭接口卡住.后来跟踪代码,定位到s_rtmp ...

  6. SOP、DIP、PLCC、TQFP、PQFP、TSOP、BGA封装解释

    1. SOP封装SOP是英文Small Outline Package的缩写,即小外形封装.SOP封装技术由1968-1969年菲利浦公司开发成功,以后逐渐派生出SOJ(J型引脚小外形封装).TSOP ...

  7. opencv 矩阵的相似性对比 （图片之间比较）

    测试图片:     code: #include <opencv\cv.h> #include <opencv\highgui.h> #include <opencv\c ...

  8. 求一列的和，awk和perl哪个快？

    下午和群里的朋友争论了一下,有关awk和perl处理文本的速度,自己一直比较推崇perl,对awk知之甚少,结果就想当然的觉得perl快,结果一番争吵后,觉得还是实验一下靠谱,(其实是想证明一下per ...

  9. ios 调试

    http://www.cnblogs.com/weilaikeji/p/3306597.html http://www.cnblogs.com/Twisted-Fate/p/4760156.html ...

  10. 用C++ 自娱自乐

    最无聊的时光当属 考试前的复习时段了,在一些论坛上看到一些用字符组成的图像,觉得有点意思,于是,自己 用C++ 参考一些论坛的图像,写了下面这个东西,来表达此时的心情. #include<ios ...