第一种  百度

直接上代码：


<!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中使用百度、谷歌地图进行定位的更多相关文章

  1. 如何在vue单页应用中使用百度地图

    作为一名开发人员,每次接到开发任务,我们首先应该先分析需求,然后再思考技术方案和解决方案.三思而后行,这是一个好的习惯. 需求:本项目是采用vue组件化开发的单页应用项目,现需要在项目中引入百度的地图 ...

  2. iOS开发中地图与定位

    不管是QQ还是微信的移动client都少不了定位功能,之前在微信demo中没有加入定位功能,今天就写个定位的小demo来了解一下定位和地图的东西. 地图和定位看上去是挺高大上一东西.其有使用方法比Ta ...

  3. iOS开发之地图与定位

    无论是QQ还是微信的移动客户端都少不了定位功能,之前在微信demo中没有添加定位功能,今天就写个定位的小demo来了解一下定位和地图的东西.地图和定位看上去是挺高大上一东西,其实用法比TableVie ...

  4. js基于谷歌地图API绘制可编辑圆形与多边形

    之前的工作中需要在谷歌地图上绘制可编辑多边形区域,所以基于谷歌地图API封装了个html页面,通过调用js绘制多边形并返回各点的经纬度坐标:当然首先你要保证你的电脑可以打开谷歌地图... 新建一个ht ...

  5. 在Fragment中实现百度地图，定位到当前位置（基于SDKv2.1.0）

    使用最新版本的百度地图需要注意的几个地方: 1.libs文件夹下要有android-support-v4.jar.baidumapapi_v2_1_0.jar.locSDK_3.1.jar三个jar包 ...

  6. AngularJS进阶(十九)在AngularJS应用中集成百度地图实现定位功能

    在AngularJS应用中集成百度地图实现定位功能 注:请点击此处进行充电! 前言 根据项目需求,需要实现手机定位功能,考虑到百度业务的强大能力,遂决定使用百度地图第三方服务. 添加第三方模块的步骤与 ...

  7. IOS中使用百度地图定位后获取城市坐标,城市名称,城市编号信息

    IOS中使用百度地图定位后获取城市坐标,城市名称,城市编号信息 /**当获取到定位的坐标后,回调函数*/ - (void)didUpdateBMKUserLocation:(BMKUserLocati ...

  8. 利用HBuilder开发基于MUI的H5+ app中使用百度地图定位功能

    定位功能有两种方法: 首先要初始化内置地图: var map = new plus.maps.Map("map"); 这里黄色的map是html里面的id: <div id= ...

  9. iOS中的地图和定位

    文章摘自http://www.cnblogs.com/kenshincui/p/4125570.html#location  如有侵权,请联系删除. 概览 现在很多社交.电商.团购应用都引入了地图和定 ...

随机推荐

  1. parted 分区命令

    fdisk  是针对 MBR的分区 ,因为MBR分区空间最大不能超过2T  最多分4个主分区 , 所以parted可以修改磁盘为GPT  可以支持更大的分区,更多的分区 1  查看分区 : #part ...

  2. js获取单选框的值

    js获取单选框的值 var lx= $("input[name='lx']:checked").val();

  3. Url地址重写

    一 什么是url重写URL 重写是截取传入 Web 请求并自动将请求重定向到其他 URL 的过程.比如浏览器发来请求 hostname/101.aspx ,服务器自动将这个请求中定向为http://h ...

  4. TCP、UDP和HTTP区别

    http:是用于www浏览的一个协议.tcp:是机器之间建立连接用的到的一个协议. 1.TCP/IP是个协议组,可分为三个层次:网络层.传输层和应用层.在网络层有IP协议.ICMP协议.ARP协议.R ...

  5. Tomcat启动分析（转自：http://docs.huihoo.com/apache/tomcat/heavyz/01-startup.html）

    Tomcat启动分析 1 - Tomcat Server的组成部分 1.1 - Server A Server element represents the entire Catalina servl ...

  6. python基础篇_002_基础数据类型

    Python基础数据类型 1.int # int 用于计算 num = 3 # int 与其他数据类型转换 int_to_str = str(num) # 数字加引号 print(int_to_str ...

  7. Leading and Trailing（巧妙利用log解决次方问题）

    Sample Input 5 123456 1 123456 2 2 31 2 32 29 8751919 Sample Output Case 1: 123 456 Case 2: 152 936 ...

  8. linux定时任务相关

    定时任务所在文件夹 /etc/crontab 定时任务重启命令 service crond restart

  9. 2601 电路维修 （双端队列bfs\优先队列bfs（最短路））

    描述 Ha'nyu是来自异世界的魔女,她在漫无目的地四处漂流的时候,遇到了善良的少女Rika,从而被收留在地球上.Rika的家里有一辆飞行车.有一天飞行车的电路板突然出现了故障,导致无法启动. 电路板 ...

  10. hdu2473

    hdu2473并查集的删除操作建立虚点,删除它就断掉了它在原图中的所有关系,而成为独立节点,而且它只能被删除一次,而且删除之后还能进行操作,采用映射(虚点)的方法,建立虚点并把删除之后的操作挪到虚点上 ...