zoukankan      html  css  js  c++  java
  • 在自己网页中嵌入百度地图

    刚刚开始工作,领导就让我做一个百度地图,我不会所以问百度。

    我认为有点难的怎么把获取坐标,百度的API,因为创建地图实例" var point = new BMap.Point(120.619907,31.317987)",是以坐标来确定显示的位置,

    而百度不提供坐标服务,搜了一下,Google有提供服务的(http://blog.csdn.net/kalision/article/details/7236344),Google横纵坐标和百度相反,感觉如果用Google地图查坐标再转百度地图太麻烦,但是客户要求百度地图,无奈只得继续百度,请大家多多点评

    然后整理下面的一些代码:

    <!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 name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
        <title>百度地图</title>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
    <style type="text/css">
        body{height:600px;;margin:0px;padding:0px; width:800px;}
        #container{height:100%}
    </style>
    </head>
    <body onkeydown="btSearche()">
    <div>
            <input type="text" name="city" runat="server" id="city" value="" size="8" />         
            <input type="text" name="adress" id="adress" runat="server"  value=""  /> 
            <!--这里可以看到坐标!-->
        <input type="text" name="point" value=""  runat="server" id="coordinates" /><input type="text" name="point" value="" runat="server" id="coordinates1" />
        <input type="button"  value="搜索" onclick="searche_address()"/>
    </div>
        
    
    <div id="container"></div>
    
    <script type="text/javascript">
        function btSearche() {
            if (event.keyCode == 13) {
                searche_address();
            }
        }
        function searche_address() { point(document.getElementById('city').value, document.getElementById('adress').value, 'coordinates') };
    
        function point(ygh_city, ygh_adress) {
            if (ygh_adress == "" || ygh_city == "") {
                alert("请输入具体地址!");
                return;
            }
        //确定坐标"myGeo.getPoint()"
    var myGeo = new BMap.Geocoder(); myGeo.getPoint(ygh_adress, function (point) { if (point) { document.getElementById('coordinates').value = point.lng; document.getElementById('coordinates1').value = point.lat; var map = new BMap.Map("container"); // 创建地图实例 var point = new BMap.Point(point.lng, point.lat); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别 map.enableScrollWheelZoom(); map.addControl(new BMap.NavigationControl()); //平移控件 map.addControl(new BMap.ScaleControl()); //比例尺控件 map.addControl(new BMap.OverviewMapControl()); //缩略图控件 map.addControl(new BMap.MapTypeControl()); //电子地图的地图类型控件 //map.setCurrentCity("石路步行街"); // 仅当设置城市信息时,MapTypeControl的切换功能才能可用 var marker = new BMap.Marker(point); map.addOverlay(marker); //位置说明提示框 var opts = { title: '<span style="font-size:14px;color:#0A8021">我的地盘</span>' }; var infoWindow = new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>你懂的</br><b>电话:</b>0512-859921010</br>详情>></a></div>", opts); // 创建信息窗口对象,引号里可以书写任意的html语句。 map.openInfoWindow(infoWindow, map.getCenter()); } else { alert("没有找到坐标,您可以放大您选择的地址!"); } }, ygh_city); } point("江苏", "苏州市"); </script> </body> </html>
  • 相关阅读:
    HDU 5213 分块 容斥
    HDU 2298 三分
    HDU 5144 三分
    HDU 5145 分块 莫队
    HDU 3938 并查集
    HDU 3926 并查集 图同构简单判断 STL
    POJ 2431 优先队列
    HDU 1811 拓扑排序 并查集
    HDU 2685 GCD推导
    HDU 4496 并查集 逆向思维
  • 原文地址:https://www.cnblogs.com/chen54/p/2678742.html
Copyright © 2011-2022 走看看