在项目应用中,经常需要将标有企业信息的窗体显示在地图上,这里给大家一个高德地图的分享
1. 将 页面中的 KEY 换成你的高德地图KEY
2. 将里面 经纬度换成需要标识地区的经纬度
3. 将 里面的信息更换成你需要设置的信息
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>默认样式信息窗体</title> <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/> <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.5
&key=换成你的高德地图KEY"></script> </head> <body> <div id="container"></div> <script type="text/javascript"> var infoWindow; var map = new AMap.Map("container", { resizeEnable: true, center: [113.972593,22.959431], zoom: 13 }); /* var marker = new AMap.Marker({ position: map.getCenter() }); marker.setMap(map);*/ //在指定位置打开信息窗体 function openInfo() { //构建信息窗体中显示的内容 var info = []; //info.push("<div><div><img style=\"float:left;\"
src=\" http://webapi.amap.com/images/autonavi.png \"/></div> "); info.push("<div style=\"padding:0px 0px 0px 4px; line-height:20px;\"><b>
<?php echo $getConfig['webname'] ?></b>"); info.push("联系人 : {$getConfig.contact} 电话 : {$getConfig.phone}"); info.push("地 址 : {$getConfig.address}</div></div>"); infoWindow = new AMap.InfoWindow({ content: info.join("<br/>") //使用默认信息窗体框样式,显示信息内容 }); infoWindow.open(map, map.getCenter()); } openInfo(); </script> <script type="text/javascript" src="http://webapi.amap.com/demos/js/liteToolbar.js"></script> </body> </html>