标签：
<!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>
标签：
原文地址：http://www.cnblogs.com/img-zoom/p/4414227.html
