第一种  百度

直接上代码：


<!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. windows云服务器数据迁移

    刚入职,第一个任务是完成windows腾讯云到windows华为云上的MySQL数据库迁移.之前都是在CentOS上搞,感觉没啥难度,一口答应,没想到各种坑接踵而来.次数不再叙述坑都有哪些了,说说怎么 ...

  2. net core体系-web应用程序-4net core2.0大白话带你入门-9asp.net core服务的生命周期

    asp.net core服务的生命周期   Transient:每一次GetService都会创建一个新的实例 Scoped:在同一个Scope内只初始化一个实例 ,可以理解为( 每一个request ...

  3. Openstack1 云计算与虚拟化概念

    一.云概念 二.虚拟化,云计算不等于虚拟化,但是云计算需要用到虚拟化的技术 1.服务器虚拟化 2.桌面虚拟化 3.应用虚拟化 三.区别 1.虚拟化是具体的技术. 2.云计算是交付使用的一种模式

  4. 今天才知道原来我还没弄清楚js中全局变量和局部变量的定义...

    查资料看到这段还不错,来源:原文:https://blog.csdn.net/czh500/article/details/80429133 粘过来记录一下... 1.使用var声明变量,在方法内部是 ...

  5. SSM知识点与整合之Spring知识点（pom.xml需要依赖的jar或者plugin）

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  6. Linux安装Tomcat-Nginx-FastDFS-Redis-Solr-集群——【第五集之网络配置】

    还有对第五集的补充:https://www.cnblogs.com/lirenhe/p/10405069.html 1,如果不为这个linux系统或者这台虚拟机配置IP,就不能实现通信.这样的之后安装 ...

  7. 05. Matplotlib 1 |图表基本元素| 样式参数| 刻度 注释| 子图

    1.Matplotlib简介及图表窗口 Matplotlib → 一个python版的matlab绘图接口,以2D为主,支持python.numpy.pandas基本数据结构,运营高效且有较丰富的图表 ...

  8. 6、Qt Project之音视频播放

    音视频播放  这里简单的制作了一个音乐播放器,播放器的界面设计如下所示: Step1:这里是界面对应的HTML文件: <?xml version="1.0" encoding ...

  9. Double.parseDouble(String s)

    要把字符串转换为Double类型,只能转换“0.02”这种格式的字符串,不能转换百分比格式的,比如“2%” 这个时候可以Double cbl= Double.parseDouble(“2%”.repl ...

  10. 如何让自己的Dev C++用上C++11,c++14标准

      首先确保Dev C++版本是最新的5.11版 其实用C++11和C++14标准的语法去运行还是会出现结果的,最多warning一下 但完美主义者是不允许这样的 我们可以点击菜单栏的“工具”-> ...