上节简单介绍高德地图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. java 复习003 之排序篇

    由java 复习003跳转过来的C语言实现版见some-sort-algorithms 快速排序(不稳定 O(n log n)) package vell.bibi.sort_algorithms; ...

  2. [Hive - Tutorial] Type System 数据类型

    数据类型Type System Hive supports primitive and complex data types, as described below. See Hive Data Ty ...

  3. mysql 查看锁表解锁

    -- 查看那些表锁到了show OPEN TABLES where In_use > 0;-- 查看进程号show processlist;--删除进程 kill 42236:

  4. pku3670 Eating Together

    http://poj.org/problem?id=3670 DP,最长不降子序列,O(n*logn)解法 #include <stdio.h> #define N 30030 int n ...

  5. 您需要来自administrators的权限才能对此文件进行更改

    今天我重装了系统,以前D盘里的一个文件夹想删除,可以一直没法删除,原先它提示"您需要来自 S-1-5-21-602162358-1284227242-682003330-500 的权限才能对 ...

  6. FIREDAC连接SQLITE乱码的解决

    在好多群里面都碰到问“FIREDAC连接SQLITE乱码的”的问题的同仁,遂将解决方法贴出来: 如上图所示设置 stringFormat为unicode即可

  7. 详解Java解析XML的四种方法

    XML现在已经成为一种通用的数据交换格式,它的平台无关性,语言无关性,系统无关性,给数据集成与交互带来了极大的方便.对于XML本身的语法知识与技术细节,需要阅读相关的技术文献,这里面包括的内容有DOM ...

  8. Altium Desiger自定义BOM导出格式

    用Excel做一个xx.xlt的2003的模版文件,如名为:AltiumDesiger PCB BOM Template.xlt 将AltiumDesiger PCB BOM Template.xlt ...

  9. POJ 1664 放苹果 (递推)

    题目链接:http://poj.org/problem?id=1664 dp[i][j]表示i个盘放j个苹果的方案数,dp[i][j] 可以由 dp[i - 1][j] 和 dp[i][j - i] ...

  10. 关于java的continue、break关键字用法

    一 明确两个概念 循环:是指按照规定次数重复执行某一操作的全过程:其关键语句有for. foreach.while.do while 迭代:是指循环过程中单次操作,1次循环由n次迭代构成 二 用法归纳 ...