第一种  百度

直接上代码：


<!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. 51Nod1675 序列变换 数论 莫比乌斯反演

    原文http://www.cnblogs.com/zhouzhendong/p/8665675.html 题目传送门 - 51Nod1675 题意 给定序列$a,b$,让你求满足$\gcd(x,y)= ...

  2. POJ3074 Sudoku 舞蹈链 DLX

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目(传送门) 题意概括 给出一个残缺的数独,求解. 题解 DLX + 矩阵构建  (两个传送门) 代码 #include & ...

  3. Bomb 数位dp

    ---恢复内容开始--- 不能有49 数位dp模板题: #include<bits/stdc++.h> using namespace std; //input by bxd #defin ...

  4. Python GUI - tkinter

    目录: Tkinter 组件 标准属性 几何管理 代码实例: 1. Label & Button 2. Entry & Text 3.Listbox列表 4.Radiobutton单选 ...

  5. day8数据类型补充，集合，深浅拷贝

    思维导图: 集合的补充:下面的思维导图有一个点搞错了,在这里纠正一下,没有合集,是反交集,^这个是反差集的意思 . 交集&,反交集^,差集-,并集|,然后就是子集和超集 数据类型补充: ''' ...

  6. Nowcoder contest 370F Rinne Loves Edges （简单树形DP) || 【最大流】(模板)

    <题目链接> 题目大意: 一个 $n$ 个节点 $m$ 条边的无向连通图,每条边有一个边权 $w_i$.现在她想玩一个游戏:选取一个 “重要点” S,然后选择性删除一些边,使得原图中所有除 ...

  7. POJ 2455 Secret Milking Machine 【二分】+【最大流】

    <题目链接> 题目大意: FJ有N块地,这些地之间有P条双向路,每条路的都有固定的长度l.现在要你找出从第1块地到第n块地的T条不同路径,每条路径上的路段不能与先前的路径重复,问这些路径中 ...

  8. HDU4578 Transformation【线段树】

    <题目链接> <转载于 >>> > 题目大意: 有一个序列,有四种操作: 1:区间[l,r]内的数全部加c. 2:区间[l,r]内的数全部乘c. 3:区间[l ...

  9. python实现简单工厂模式

    python实现简单工厂模式 模式定义 简单工厂模式(Simple Factory Pattern):又称为静态工厂方法(Static Factory Method)模式,它属于类创建型模式.在简单工 ...

  10. [R] R dataframe 中对列使用sort或者order的注意

    存在这样的需求: 针对每列的值, 对列进行排序. 这样处理过数据后, 在excel中对数据作图时, 使数据呈现有序. R中sort数据的时候, 如果数据中存在字符串, R会将数据转化为characte ...