上节简单介绍高德地图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. 迁移web.py项目至git@osc的项目演示平台

    1. 开启演示平台 选择WSGI,输入应用名称,即是演示网页的网址. 2. web.py代码迁移 将Python的site-packages目录下的web文件夹复制到代码目录下,与网页程序在同一个文件 ...

  2. linux appear packet loss solution

    故障排查: 早上突然收到nagios服务器check_icmp的报警,报警显示一台网站服务器的内网网络有问题.因为那台服务器挂载了内网的NFS,因此内网的网络就采用nagios的check_icmp来 ...

  3. HDU 3072 Intelligence System （强连通分量）

    Intelligence System Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  4. iomanip.h

    http://baike.baidu.com/link?url=zuNLgcUVylhUYYefyV13F38NChIMx8nnCEWV5zkkTQMrrSdKPxUERZuydSHtp6sXukWv ...

  5. JMS开发(二):深入PTP,Pub-Sub两种模式

    1.PTP模型 PTP(Point-to-Point)模型是基于队列(Queue)的,对于PTP消息模型而言,它的消息目的是一个消息队列(Queue),消息生产者每次发送消息总是把消息送入消息队列中, ...

  6. 计算两个日期相隔的天数（jodd）

    public static void main(String[] args) throws ParseException { System.out.println(TimeUtil.dayOfYear ...

  7. 织梦dedecms后台添加图片style全部都变成st<x>yle的解决办法

    可乐站长在建站的时候,上传缩略图喜欢输入图片路径,不喜欢上传图片,有几次我上传图片路径为:/style/image/**.jpg,然后返回修改后,图片为路径却为:/st<x>yle/ima ...

  8. Autofac介绍

    原帖:http://www.cnblogs.com/xupng/archive/2011/07/12/2104766.html Autofac为何物?它是.NET世界里现存的几种IOC框架其中之一,传 ...

  9. DX相机变换矩阵推导

    网上很多的推导过程都是错的,所以写一个. 先平移,再旋转就可以,先平移的原因是,如果先旋转的话,坐标系已经改了,所以先平移. 平移的变换和相机的变换是相反的,所以是: 平移完成后,相机的位置就和原点的 ...

  10. SessionFactory、HibernateTemplate、HibernateDaoSupport之间的关系说明

    在接触HibernateTemplate之前,我们知道,在对数据库进行CRUD操作之前,需要开启session.transaction等等.在hibernate学习过程中,我们知道了,得到sessio ...