- <span style="font-family:Microsoft YaHei;font-size:14px;"><html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
- <title>百度地图搜索</title>
- <script type="text/javascript" src="http://mapclick.map.baidu.com/data/98_36_11_018.js"></script>
- <script type="text/javascript"
- src="http://api.map.baidu.com/api?v=1.5&ak=1jwM1UGS8wPTvaiUSUaUnuOG"></script>
- </head>
- <body>
- <div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
- 要查询的地址:<input id="text_" type="text" value="山东济南泉城广场" style="margin-right:100px;"/>
- 查询结果(经纬度):<input id="result_" type="text" />
- <input type="button" value="地址查询经纬度" οnclick="searchByStationName();"/>
- <div id="r-result">
- 城市名: <input id="cityName" type="text" style="width:100px; margin-right:10px;" />
- <input type="button" value="查询" οnclick="theLocation()" />
- </div>
- <div id="results" style="font-size:13px;margin-top:10px;"></div>
- </body>
- </html>
- <script type="text/javascript">
- var map = new BMap.Map("container");
- map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
- map.enableScrollWheelZoom(); //启用滚轮放大缩小,默认禁用
- map.enableContinuousZoom(); //启用地图惯性拖拽,默认禁用
- //为了使用地图更加方便,我们还可以添加上缩放的平移控件,以及地图的缩略图控件,并设置他要显示的位置:
- map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
- map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
- map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT })); //右下角,打开
- //var local = new BMap.LocalSearch(map, {
- // renderOptions: {map: map, panel: "results"}
- //});
- //var opts = {anchor: BMAP_ANCHOR_TOP_RIGHT, offset: map.getCenter()};
- var opts = {anchor: BMAP_ANCHOR_TOP_RIGHT, offset: new BMap.Size(10, 10)};
- //map.addControl(new BMap.NavigationControl(opts));
- //local.search("北京市海淀区上地地铁站");
- //1.构建搜索
- var localSearch = new BMap.LocalSearch(map);
- localSearch.enableAutoViewport(); //允许自动调节窗体大小
- //2.开始做最关键的一步了,就是获取地址的具体经纬度:
- var searchByStationName = function(){
- var keyword = document.getElementById("text_").value;
- //搜索回调方法
- localSearch.setSearchCompleteCallback(function (searchResult) {
- alert(searchResult);
- var poi = searchResult.getPoi(0);
- document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat; //获取经度和纬度,将结果显示在文本框中
- map.centerAndZoom(poi.point, 13);
- });
- localSearch.search(keyword);
- }
- /**********************************
- ***********百度地图API功能*********
- **********************************/
- //1.城市名定位
- //var map = new BMap.Map("allmap");
- //var point = new BMap.Point(116.331398,39.897445);
- //map.centerAndZoom(point,11);
- function theLocation(){
- var city = document.getElementById("cityName").value;
- if(city != ""){
- map.centerAndZoom(city,11); // 用城市名设置地图中心点
- }
- }
- //2.IP定位获取当前城市
- function myFun(result){
- var cityName = result.name;
- map.setCenter(cityName);
- alert("当前定位城市:"+cityName);
- }
- var myCity = new BMap.LocalCity();
- myCity.get(myFun);
- //3.单击获取点击的经纬度
- //单击获取点击的经纬度
- var longitude = "";//经度
- var latitude = "";//纬度
- map.addEventListener("click",function(e){
- alert("经度:"+e.point.lng + "," + "纬度:" +e.point.lat);
- longitude = e.point.lng;
- latitude = e.point.lat;
- if(longitude != "" && latitude != ""){
- map.clearOverlays();
- var new_point = new BMap.Point(longitude,latitude);
- var marker = new BMap.Marker(new_point); // 创建标注
- map.addOverlay(marker); // 将标注添加到地图中
- map.panTo(new_point);
- marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
- }
- });
- //4 用经纬度设置地图中心点
- /*function theLocation(){
- if(longitude != "" && latitude != ""){
- map.clearOverlays();
- var new_point = new BMap.Point(longitude,latitude);
- var marker = new BMap.Marker(new_point); // 创建标注
- map.addOverlay(marker); // 将标注添加到地图中
- map.panTo(new_point);
- }
- }*/
- //5.逆地址解析,点击地图展示详细地址
- var geoc = new BMap.Geocoder();
- map.addEventListener("click", function(e){
- var pt = e.point;
- geoc.getLocation(pt, function(rs){
- var addComp = rs.addressComponents;
- alert(addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber);
- });
- });
- </script>
- </span>
PHP版:地图对接汇总
最新推荐文章于 2023-12-20 16:22:06 发布