关于运用高德地图api，并在api上显示标注的小应用

最新推荐文章于 2023-08-02 10:08:37 发布

风过留痕丶

最新推荐文章于 2023-08-02 10:08:37 发布

阅读量4k

点赞数 1

分类专栏： web前端文章标签： javascript

本文链接：https://blog.csdn.net/u011768325/article/details/42079333

版权

web前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!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>