首页 > 代码库 > javaweb中使用百度、谷歌地图进行定位
javaweb中使用百度、谷歌地图进行定位
第一种 百度
直接上代码：
<!DOCTYPE><html><head><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><title>百度地图</title> <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style> <script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script></head><body> <input type="text" id="cityName" value="福州"/><input type="button" onclick="setCity()" value="查找" /><div id="container" style="width:1024px;height:600px;"></div> <script type="text/javascript"> var map = new BMap.Map("container"); //在container容器中创建一个地图,参数container为div的id属性; var point = new BMap.Point(120.2,30.25); //创建点坐标 map.centerAndZoom(point, 14); //初始化地图，设置中心点坐标和地图级别 map.enableScrollWheelZoom(); //激活滚轮调整大小功能 map.addControl(new BMap.NavigationControl()); //添加控件：缩放地图的控件，默认在左上角； map.addControl(new BMap.MapTypeControl()); //添加控件：地图类型控件，默认在右上方； map.addControl(new BMap.ScaleControl()); //添加控件：地图显示比例的控件，默认在左下方； map.addControl(new BMap.OverviewMapControl()); //添加控件：地图的缩略图的控件，默认在右下方； TrafficControl var search = new BMap.LocalSearch("中国", { onSearchComplete: function(result){ if (search.getStatus() == BMAP_STATUS_SUCCESS){ var res = result.getPoi(0); var point = res.point; map.centerAndZoom(point, 11); } },renderOptions: { //结果呈现设置， map: map, autoViewport: true, selectFirstResult: true } ,onInfoHtmlSet:function(poi,html){//标注气泡内容创建后的回调函数，有了这个，可以简单的改一下返回的html内容了。 // alert(html.innerHTML) }//这一段可以不要，只不过是为学习更深层次应用而加入的。 }); function setCity(){ search.search(document.getElementById("cityName").value); } search.search(document.getElementById("cityName").value); </script></body></html>
第二种： 谷歌
首先引入 <script type="text/JavaScript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
代码如下
js代码
var myLatlng = new google.maps.LatLng(ret.attache.json.lat, ret.attache.json.lng);// 中国地图全图 var optMap = {zoom: 15, center: myLatlng,streetViewControl:false,mapTypeControl: true,mapTypeControlOptions: { mapTypeIds: [/**google.maps.MapTypeId.SATELLITE ,google.maps.MapTypeId.HYBRID* */], // comment position: google.maps.ControlPosition.TOP_LEFT},// navigationControl: true,navigationControlOptions: { style: google.maps.NavigationControlStyle.DEFAULT, position: google.maps.ControlPosition.LEFT},//ROADMAP SATELLITE mapTypeId: google.maps.MapTypeId.ROADMAP}; map = new google.maps.Map(document.getElementById(‘Container‘),optMap); map.setOptions({Zoom:18,center:myLatlng});
html
<div id="locationDiv" ><div id="container" style="position:relative; width:450px; height:300px;"></div></div>
javaweb中使用百度、谷歌地图进行定位
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。