<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>自定义点标记图标</title>
<link rel="stylesheet" type="text/css" href="http://developer.amap.com/Public/css/demo.Default.css" />
<!-- 这里的key值需要到http://lbs.amap.com/api/javascript-api/summary-3/这个网址里申请,在左下角的为位置-->
<script language="javascript" src="http://webapi.amap.com/maps?v=1.3&key=你申请的key值"></script>
<script language="javascript">
var mapObj,marker;
//初始化地图对象,加载地图
function mapInit(){
mapObj = new AMap.Map("iCenter",{
//二维地图显示视口
view: new AMap.View2D({
center:new AMap.LngLat(116.397428,39.90923),//地图中心点
zoom:4 //地图显示的缩放级别
})
});
//添加点标记,并使用自己的icon
addMarker1();
addMarker2();
}
//在地图上添加点标记函数
function addMarker1(){
marker=new AMap.Marker({
icon:new AMap.Icon({ //复杂图标
size:new AMap.Size(25,25),//图标大小
image:"chinaz12.png", //大图地址
imageOffset:new AMap.Pixel(0,0)//相对于大图的取图位置
}),
position:new AMap.LngLat(116.405467,39.907761)
});
marker.setMap(mapObj); //在地图上添加点
//信息载体
var info = [];
info.push("<b> 高德软件</b>");
info.push(" 电话 : 010-84107000 邮编 : 100102");
info.push(" 地址 : 北京市望京阜通东大街方恒国际中心A座16层");
var inforWindow = new AMap.InfoWindow({
offset:new AMap.Pixel(0,-25),
content:info.join("<br>")
});
//监听事件
AMap.event.addListener(marker,"click",function(e){
inforWindow.open(mapObj,new AMap.LngLat(116.405467,39.907761));
});
}
//在地图上添加点标记函数
function addMarker2(){
marker=new AMap.Marker({
icon:new AMap.Icon({ //复杂图标
size:new AMap.Size(25,25),//图标大小
image:"chinaz12.png", //大图地址
imageOffset:new AMap.Pixel(0,0)//相对于大图的取图位置
}),
position:new AMap.LngLat(120.343234,30.31162)
});
marker.setMap(mapObj); //在地图上添加点
//信息载体
var info = [];
info.push("<b> 杭州电子科技大学</b>");
info.push(" 电话 : 010-84107000 邮编 : 100102");
info.push(" 地址 : 北京市望京阜通东大街方恒国际中心A座16层");
var inforWindow = new AMap.InfoWindow({
offset:new AMap.Pixel(0,-25),
content:info.join("<br>")
});
//监听事件
AMap.event.addListener(marker,"click",function(e){
inforWindow.open(mapObj,new AMap.LngLat(120.343234,30.31162));
});
}
</script>
</head>
<body onLoad="mapInit()">
<div id="iCenter"></div>
</body>
</html>
关于运用高德地图api,并在api上显示标注的小应用
最新推荐文章于 2023-08-02 10:08:37 发布