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

周华华

浏览: 10208 次
性别:
来自: 深圳

最近访客更多访客>>

woodding2008

withcourageto

jstl1point0

wd1282988143

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

前端

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

第一种百度

直接上代码：

<!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代码

html

分享到：

oracle自动增长

2016-07-02 17:16
浏览 1377
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

正则表达式

事件源对象

Dom

overflow的属性

属性颜色字体变化

DOM改变字体大小

最近访客更多访客>>