javaweb中使用百度、谷歌地图进行定位

来源：互联网发布：自学钢琴知乎编辑：程序博客网时间：2024/05/22 10:49

之前给一个公司做了一个定位，调用一个接口获得经纬度，然后在地图上显示，

之前我做了三种显示，百度、谷歌、搜狗，搜狗和百度类似，这里就介绍百度和谷歌了，

之前我们在一个城市里面坐了测试，不一定很准确，但是比较出来的结果是

就定位来说谷歌是比百度要精准的，包括一些位置的信息，都比较全，但是因为谷歌在中国的处境来说，现在很多机房的服务器都把谷歌给禁用了，根据情况来看吧！

第一种百度

直接上代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%@ page import="com.webapp.entity.*"%><%@ page import="java.util.*"%><%    String path = request.getContextPath();    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()            + path + "/";%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><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>

这个网址是百度地图免费开放的一些案例，内容非常丰富，但是有些使用是收费的，大家可以根据自己需要进行学习。
http://developer.baidu.com/map/jsdemo.htm#d0_4

阅读全文

0 0