地图对接汇总(百度地图)

最近再做一个项目需要用户地图定位功能，因此研究了一下百度地图的功能。

多了不说上代码：

php版

<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>

附上baidu地图APIdemo地址：http://developer.baidu.com/map/jsdemo.htm

地图对接汇总(百度地图)相关推荐

android地图入门,android 百度地图入门01 (史上最详没有之一)
最近一直和百度地图打交道,写几篇博客记录一下吧,目前最新版是4.0的 ,之前我用的是3.7的, 就以4.0的为例说一下最基本的配置流程吧. 一.准备工作 1.申请一个百度地图开发者账户--地址:htt ...
android 百度地图 itemizedoverlay,[008] 百度地图API之ItemizedOverlay的使用(Android) .
本篇文章主要介绍如何在百度地图上添加Overlay(即图层或覆盖物). Overlay简介 Overlay通常被译为"图层"或"覆盖物".那么对于地图而言,什么 ...
android 百度地图 itemizedoverlay,[008] 百度地图API之ItemizedOverlay的使用(Android)
本篇文章主要介绍如何在百度地图上添加Overlay(即图层或覆盖物). Overlay简介 Overlay通常被译为"图层"或"覆盖物".那么对于地图而言,什么 ...
echarts地图api series_百度地图2.0离线版与echarts结合
由于客户需求,之前使用的json形式的可钻取型地图被放弃了,要好看,没有网-,于是开启了打地鼠(bug)模式,总结如下: 网上搜索,百度离线地图资料很有限啊,可以用的几个要么年代久远,要么不能满足需求 ...
c语言api获取百度地图,H5调用百度地图API获取地理位置
//获取当前位置 var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r){ alert ...
GPS坐标互转：WGS-84(GPS)、GCJ-02(Google地图)、BD-09(百度地图)
GPS坐标互转:WGS-84(GPS).GCJ-02(Google地图).BD-09(百度地图) WGS-84:是国际标准,GPS坐标(Google Earth使用.或者GPS模块) GCJ-02:中 ...
腾讯地图api php经纬度转换地址,腾讯地图经纬度转换为百度地图经纬度
‍ 利用微信来获取用户当前的详细地址是非常方便的,但是利用微信获取到用户的经纬度转换为具体地址时,老是出现误差很大,因此,决心把腾讯地图经纬度转换城百度地图经纬度,然后再‍利用百度地图api来获取详细 ...
js处理腾讯地图经纬度转换百度地图经纬度
}) /** * 坐标转换,腾讯地图转换成百度地图坐标 * lng 腾讯经度(pointy) * lat 腾讯纬度(pointx ...
用html制作百度地图,canvas实现百度地图个性化底图绘制
精华 node-canvas实现百度地图个性化底图绘制发布于 3 年前作者 lzxue 11783 次浏览来自技术原文转自 #node-canvas实现百度地图个性化底图绘制随着nodej ...

地图对接汇总(百度地图)

地图对接汇总(百度地图)相关推荐

最新文章

热门文章