高德地图显示默认信息窗体_南昌JS/JQUERYWEB前端培训

在项目应用中，经常需要将标有企业信息的窗体显示在地图上，这里给大家一个高德地图的分享

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>