20171109地图创建地图

来源：互联网发布：国外数据分析公司编辑：程序博客网时间：2024/05/22 02:30
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>  <head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title>Simple Map</title>        <style type="text/css">            body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}            p{margin-left:5px; font-size:14px;}        </style>        <script type="text/javascript" src="http://api.map.baidu.com/api?ak=申请的Key&v=2.0&services=false"></script>    </head>    <body>        <div id="content" class="content">        <input type="text" value="" id="keyword" />        <input type="button" name="" id="" value="查询" onclick="search()" />        <div style="width:600px;height:500px;border:0px solid gray" id="container"></div>        <p id="aa"></p>        <script type="text/javascript">            //创建Map实例            var map = new BMap.Map("container");            var point = new BMap.Point(118.060576,36.842432);            map.centerAndZoom(point,15);            //添加鼠标滚动缩放            map.enableScrollWheelZoom();                        //添加缩略图控件            map.addControl(new BMap.OverviewMapControl({isOpen:false,anchor:BMAP_ANCHOR_BOTTOM_RIGHT}));            //添加缩放平移控件            map.addControl(new BMap.NavigationControl());            //添加比例尺控件            map.addControl(new BMap.ScaleControl());            //添加地图类型控件            //map.addControl(new BMap.MapTypeControl());                        //设置标注的图标            var icon = new BMap.Icon("img/icon.jpg",new BMap.Size(100,100));            //设置标注的经纬度            var marker = new BMap.Marker(new BMap.Point(118.056156,36.840988),{icon:icon});            //把标注添加到地图上            map.addOverlay(marker);            var content = "<table>";                  content = content + "<tr><td> 编号：001</td></tr>";                  content = content + "<tr><td> 地点：淄博市张店区</td></tr>";                 content = content + "<tr><td> 时间：2014-09-26</td></tr>";                  content += "</table>";            var infowindow = new BMap.InfoWindow(content);            marker.addEventListener("click",function(){                this.openInfoWindow(infowindow);            });                        //点击地图，获取经纬度坐标            map.addEventListener("click",function(e){                document.getElementById("aa").innerHTML = "经度坐标："+e.point.lng+" &nbsp;纬度坐标："+e.point.lat;            });                        //关键字搜索            function search(){                var keyword = document.getElementById("keyword").value;                var local = new BMap.LocalSearch(map, {                renderOptions:{map: map}            });            local.search(keyword);            }        </script>                </div>    </body></html>
阅读全文
0 0
20171109地图 创建地图

20171109地图创建地图
