第一种  百度

直接上代码：


<!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. HDU3488 Tour KM

    原文链接http://www.cnblogs.com/zhouzhendong/p/8284304.html 题目传送门 - HDU3488 题意概括 给一个n的点m条边的有向图. 然后让你把这个图分 ...

  2. 041 SparkSql的回顾与复习

    在前面学完了SparkCore后,又学了SparkSQL,在继续加深学习之前,一定的复习还是很重要的.这里大体写一下,加深自己对SparlSQL的理解. 1.SparkSQL 首先是SaprkSQL与 ...

  3. Hudson与Jenkins

    Hudson是Jenkins的前身,它们都是基于Java开发的一种持续集成工具,用于监控程序重复的工作,包括: 1.持续的软件版本发布/测试项目. 2.监控外部调用执行的工作. Hudson的特性 1 ...

  4. Maya Max python PySide集成 shiboken版本对应关系

    Maya_Max _python_PySide集成_shiboken版本对应关系 1.如何查看 Maya Max 集成的 Python版本: Maya:在 Maya 的安装目录下的 bin 文件夹中找 ...

  5. a标签下划线

    页面中有一处box中的a标签都被加上了下划线,查找元素却没有找到css中的underline. 原因是 <a>标签默认是有下划线的,而一般看到的<a>标签链接中的下划线都被覆盖 ...

  6. elf逆向入门

    一: 在linux下进行调试时容易出现权限不够的情况:此时解决办法就是chmod 777+文件名提升权限,以实验吧debug为例,给出了简单的32elf文件,我在查看一些资料以后发现,我需要在main ...

  7. 洛谷P1541 乌龟棋(四维DP)

    To 洛谷.1541 乌龟棋 题目背景 小明过生日的时候,爸爸送给他一副乌龟棋当作礼物. 题目描述 乌龟棋的棋盘是一行N个格子,每个格子上一个分数(非负整数).棋盘第1格是唯一的起点,第N格是终点,游 ...

  8. JVM笔记（二）JVM基本结构

    JVM基本结构 一.运行时内存区域 java虚拟机所管理的内存将会包括以下几个运行时内存区域. 1.程序计数器 Program Counter Register:可以看作当前线程(线程私有)所执行的字 ...

  9. JAVA的8种基本数据类型和类型转换

    byte 字节型                        1字节(8bit) 初始值:0 char 字符型 2字节 空格 short 短整型 2字节 0 int 整形    4字节 0 long ...

  10. 潭州课堂25班：Ph201805201 爬虫高级 第十二 课 Scrapy-redis分布 项目实战 (课堂笔记)

    建代理池, 1,获取多个网站的免费代理IP, 2,对免费代理进行检测,>>>>>携带IP进行请求, 3,检测到的可用IP进行存储, 4,实现api接口,方便调用, 5,各 ...