在項目應用中,經(jīng)常需要將標有企業(yè)信息的窗體顯示在地圖上,這里給大家一個高德地圖的分享
1. 將 頁面中的 KEY 換成你的高德地圖KEY
2. 將里面 經(jīng)緯度換成需要標識地區(qū)的經(jīng)緯度
3. 將 里面的信息更換成你需要設(shè)置的信息
<!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" />
<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() {
//構(gòu)建信息窗體中顯示的內(nèi)容
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("聯(lián)系人 : {$getConfig.contact} 電話 : {$getConfig.phone}");
info.push("地 址 : {$getConfig.address}</div></div>");
infoWindow = new AMap.InfoWindow({
content: info.join("<br/>") //使用默認信息窗體框樣式,顯示信息內(nèi)容
});
infoWindow.open(map, map.getCenter());
}
openInfo();
</script>
<script type="text/javascript" src="http://webapi.amap.com/demos/js/liteToolbar.js"></script>
</body>
</html>
