DTcms.Web/templates/main/map.html

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>地图旅游 - {config.webname}</title>
    <link rel="stylesheet" href="<%templateskin%>/css/pagination.css" />
    <link href="<%templateskin%>/css/style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" charset="utf-8" src="{config.webpath}scripts/jquery/jquery-1.11.2.min.js"></script>
    <style type="text/css">#allmap{width:1200px;height:1000px; margin:0 auto; font-size:13px;}</style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=9fe35h9r73P01Hqva2tOYlba4gTzOIwu"></script>
</head>
<body>
    <!--Header-->
    <%template src=/_header.html/%>
    <!--/Header-->
    <div style="margin:0 auto; padding:10px 0px; width:1200px; background:#ffffff;">
        <div id="allmap"></div>
    </div>
    <script type="text/javascript">
        var map = new BMap.Map("allmap");
        var point = new BMap.Point(109.848583, 40.635324);
        var myIcon = new BMap.Icon("/templates/main/images/wz_blue.png", new BMap.Size(50, 50));
        var marker = new BMap.Marker(point, { icon: myIcon });  // 创建标注
        map.addOverlay(marker); // 将标注添加到地图中

        //map.centerAndZoom(point, 13);
        map.centerAndZoom(new BMap.Point(109.968893, 40.613972), 13);//地图默认经纬度和缩放放大等级
        map.enableScrollWheelZoom(true);


        var opts = {
            width: 350,     // 信息窗口宽度
            height: 220,     // 信息窗口高度
            title: "<strong><a href='/goods_show.aspx?id=119'>太仆寺御马苑</a></strong>" // 信息窗口标题
        }
        var infoWindow = new BMap.InfoWindow("<p><a href='/goods_show.aspx?id=112'><img width='340' height='120' src='/upload/201701/01/201701011127414175.jpg' /></a></p><p style='line-height:24px;'>电话：5326442<br>网点地址：包头市稀土高新区黄河大街85号（一楼）客户服务中心（稀土大厦东侧)</p>", opts);  // 创建信息窗口对象 
        marker.addEventListener("click", function () {
            map.openInfoWindow(infoWindow, point); //开启信息窗口
        });

        
        var pt1 = new BMap.Point(109.893743, 40.666318);
        var myIcon1 = new BMap.Icon("/templates/main/images/wz_green.png", new BMap.Size(50, 50));
        var marker1 = new BMap.Marker(pt1, { icon: myIcon1 });  // 创建标注
        map.addOverlay(marker1);

        var opts1 = {
            width: 350,
            height: 220,
            title: "<strong><a href='/goods_show.aspx?id=112'>水库</a></strong>"
        }
        var infoWindow1 = new BMap.InfoWindow("<p><a href='/goods_show.aspx?id=112'><img width='340' height='120' src='/upload/201701/01/201701011127419783.jpg' /></a></p><p style='line-height:24px;'>电话：5326442<br>网点地址：包头市稀土高新区黄河大街85号（一楼）客户服务中心（稀土大厦东侧)</p>", opts1);  // 创建信息窗口对象
        marker1.addEventListener("click", function () {
            map.openInfoWindow(infoWindow1, pt1); //开启信息窗口
        });


        var pt2 = new BMap.Point(109.819435, 40.677778);
        var myIcon2 = new BMap.Icon("/templates/main/images/wz_green.png", new BMap.Size(50, 50));
        var marker2 = new BMap.Marker(pt2, { icon: myIcon2 });  // 创建标注