在自己网页中嵌入百度地图

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

我认为有点难的怎么把获取坐标,百度的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>
原文地址:https://www.cnblogs.com/chen54/p/2678742.html