高德地图 

<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>高德地图</title>
    <!--设置样式，使地图充满整个浏览器窗口-->
    <style type="text/css">
      html{height:100%}
      body{height:100%;margin:0px;padding:0px}
      #container{height:100%}
      span{
            display: block;
            height: 40px;
            width:80px;
            text-align:center;
            padding-left:10px;
            padding-right:10px;
            line-height:40px;
            border:1px solid #ccc;
            color:blue;
            font-size:20px;
            border-radius:3px;
        }
    </style>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=6f41d25d410f5ea087fe145b381fe38a"></script>
    <script type="text/javascript">
     var map;
     var toolBar;
     var lngX, latY;
     var marker;
       var markerArr = [  
                    { title: "A23", point: "112.549500,37.857014" },  
                    { title: "456", point: "112.549700,37.857014"},  
                    { title: "789", point: "112.549900,37.857014"},  
                    { title: "10JQ", point: "112.549100,37.857014"}]; 
     function initialize(){ 
        var position=new AMap.LngLat(112.549248,37.857014);
        map=new AMap.Map("container",{
            view: new AMap.View2D({//创建地图二维视口
            center:position,//创建中心点坐标
            zoom:14, //设置地图缩放级别
            rotation:0, //设置地图旋转角度
            resizeEnable: true
          }),
          lang:"zh_cn"//设置地图语言类型，默认：中文简体
        });
          //地图类型切换
        map.plugin(["AMap.MapType"], function() {
          var type = new AMap.MapType({defaultType:0});//初始状态使用2D地图
          map.addControl(type);
        });
        
        addMarker();

//        var clickEventListener=AMap.event.addListener(map,'click',function(e){
//         lngX= e.lnglat.getLng();
//         latY= e.lnglat.getLat();  
//        });
      }
     //实例化标记点
     function addMarker(){
      var markerContent;
      var markerImg;
      var markerSpan;
      for(var i=0;i<markerArr.length;i++){
        lngX=markerArr[i].point.split(",")[0];
        latY=markerArr[i].point.split(",")[1];
        title=markerArr[i].title;
        markerContent = document.createElement("div");
        //点标记中的图标
        markerImg = document.createElement("img");
        markerImg.className = "markerlnglat";
        markerImg.src = "http://webapi.amap.com/images/0.png";    
        markerContent.appendChild(markerImg);
        markerSpan=document.createElement("span");
        markerSpan.innerHTML=title;
        markerContent.appendChild(markerSpan);
        marker = new AMap.Marker({
            map:map,
            draggable:false, //点标记可拖拽
            cursor:'move',  //鼠标悬停点标记时的鼠标样式
            raiseOnDrag:true,//鼠标拖拽点标记时开启点标记离开地图的效果
            position:new AMap.LngLat(lngX,latY),
            offset: new AMap.Pixel(-18,-36), //相对于基点的偏移位置
            topWhenMouseOver:true,
            content: markerContent   //自定义点标记覆盖物内容
        });
      }
            marker.setMap(map);  //在地图上添加点
     }
    </script>
  </head>
  <body onload="initialize()">
    <!--创建地图容器元素-->
    <div id="container"></div>
    <div id="tip">
      <input type="button" value="添加点标记覆盖物" onClick="javascript:addMarker()"/>  
    </div>
  </body>
  
</html>

 

posted on 2015-04-10 12:26  kevin~kai  阅读(342)  评论(0)    收藏  举报