上节简单介绍高德地图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. Nuttx操作系统

    前几天答辩的时候看到有同学在用,回来后查了点资料. 来源:天又亮了 1  NuttX 实时操作系统 NuttX 是一个实时操作系统(RTOS),强调标准兼容和小型封装,具有从8位到32位微控制器环境的 ...

  2. mysql统计一张表中条目个数的方法

    统计一张表中条目的个通常的SQL语句是: select count(*) from tableName; #or ) from tableName; #or 统计一个列项,如ID select cou ...

  3. 并行开发——Parallel的使用 -摘自网络

    随着多核时代的到来,并行开发越来越展示出它的强大威力,像我们这样的码农再也不用过多的关注底层线程的实现和手工控制, 要了解并行开发,需要先了解下两个概念:“硬件线程”和“软件线程”. 1. 硬件线程 ...

  4. windows防火墙无法启动，服务不存在

    系统的防火墙无法启动,系统服务里面也没有防火墙的服务,用下面第一种方法,导 入注册表,重启服务器,在服务里面有防火墙的服务了,然后启动就好了,需要重新配置防火墙 在控制面板中启动防火墙的时候提示无法识 ...

  5. AndroidAsync ：异步Socket,http(client+server),websocket和socket.io的Android类库

    AndroidAsync是一个用于Android应用的异步Socket,http(client+server),websocket和socket.io的类库.基于NIO,没有线程.它使用java.ni ...

  6. Spring InitializingBean and DisposableBean example

    In Spring, InitializingBean and DisposableBean are two marker interfaces, a useful way for Spring to ...

  7. JavaIO（03）字节流--OutputStream and InputStream

    IO概述:   IO流用来处理设备之间的数据传输 java对数据的操作是通过流的方式 java用于操作流的对象都在IO包中 流按操作数据分为两种:字节流与字符流(编码表) 流按流向分为:输入流,输出流 ...

  8. Nginx应用案例分享：压力测试

    在运维工作中,压力测试是一项非常重要的工作.比如在一个网站上线之前,能承受多大访问量.在大访问量情况下性能怎样,这些数据指标好坏将会直接影响用户体验. 但是,在压力测试中存在一个共性,那就是压力测试的 ...

  9. Javascript 原型继承(续)—从函数到构造器的角色转换

    对于每一个声明的函数,里边都会带有一个prototype成员,prototype会指向一个对象,现在我们来聚焦prototype指向的这个对象,首先我们会认为,这个对象是一个该函数对应的一个实例对象, ...

  10. ASP.NET 尖括号 百分号 井号 等号 的用法

    1.<%=%>  尖括号 百分号 等号 里面放的变量或方法,如: <div> <h1>Hello World</h1> <p><%= ...