您的位置：首页 > Web前端 > JavaScript

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

2013-08-31 18:53 721 查看

上节简单介绍高德地图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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航