<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

	<head>

		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

		<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>

　　

javaweb地图定位demo的更多相关文章

  1. 基于mAppWidget实现手绘地图--索引&DEMO

    文章翻译完了,梳理一下,附Demo下载 基于mAppWidget实现手绘地图(一)–简介 基于mAppWidget实现手绘地图(二)–概要 基于mAppWidget实现手绘地图(三)–环境搭建 基于m ...

  2. APP-4-百度地图定位

    APP-3-百度地图应用 需要根据上一步完成百度地图应用的测试,本文介绍Hbuilder通过MUI框架完成百度地图的定位. 1.代码部分 <!DOCTYPE html> <html& ...

  3. Android studio 百度地图开发（2）地图定位

    Android studio 百度地图开发(2)地图定位 email:chentravelling@163.com 开发环境:win7 64位,Android Studio,请注意是Android S ...

  4. android 百度地图 定位功能

    废话不多说 直接新建一个新android项目:location,然后花一分钟申请一个key,然后就是把百度定位demo抄一下即可 1:首先在AndroidManifest.xml中加入权限 <u ...

  5. (十八)WebGIS中清空功能和地图定位功能的设计以及实现

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 当地图中增加了很多元素后,对不同的元素需要进行一定的控制,最 ...

  6. Android之仿ele地图定位效果

    PS:最近项目要求,希望在选择地址的时候能够仿ele来实现定位效果.因此就去做了一下.不过ele使用高德地图实现的,我是用百度地图实现的.没办法,公司说用百度那就用百度的吧.个人觉得高德应该更加的精准 ...

  7. iOS 获取用户授权的用户隐私保护-地图定位

    获取用户授权的用户隐私保护地图定位示例://导入定位框架#import<CoreLocation/CoreLocation.h>@interfaceViewController()< ...

  8. 关于iOS地图定位中点击设置->隐私->定位服务 闪退问题

    iOS8之后,如果应用中用到了地图定位,那么点击设置->隐私->定位服务 再点击该应用有时候会出现闪退问题,其原因是iOS8之后定位中添加了 NSLocationWhenInUseDesc ...

  9. 百度地图API实现地图定位

    1.引用JS: <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0& ...

随机推荐

  1. GPU编程自学5 —— 线程协作

    深度学习的兴起,使得多线程以及GPU编程逐渐成为算法工程师无法规避的问题.这里主要记录自己的GPU自学历程. 目录 <GPU编程自学1 -- 引言> <GPU编程自学2 -- CUD ...

  2. MDN搜索结果自动跳转中文地址

    MDN社区(即Mozilla开发者社区)具有很多高质量中英文文档.它是我开发时遇到概念模糊的地方经常访问的网站.因为默认搜索一些代码,优先显示的都是英文.但是恰恰这些显示的英文文档是有中文的.每次都是 ...

  3. C++Builder中的延时函数

    第一种方法: 使用 Sleep(1000) 函数 如果使用Sleep(1000);的时候提示如此错误   [C++ Error] supplierPayment_.cpp(321): E2015 Am ...

  4. Android编程 高德地图 中如何重写 定位按键 的触发事件 （com.amap.api.maps2d.LocationSource）点击定位后不仅定位在地图中心点上而且可以设置地图的缩放大小和提示

    在利用高德地图来编写自己的APP的时候,发现了一种对定位按键的重写方法,那就是利用   com.amap.api.maps2d.LocationSource  接口来重写. 什么是定位按键呢,下图中右 ...

  5. [Python编程实战] 第一章 python的创建型设计模式1.1抽象工厂模式

    注:关乎对象的创建方式的设计模式就是“创建型设计模式”(creational design pattern) 1.1 抽象工厂模式 “抽象工厂模式”(Abstract Factory Pattern) ...

  6. 使用python处理selenium中的css_selector定位元素的模糊匹配问题

    # 匹配id,先指定一个html标签,然后加上“#”符号,再加上id的属性值 self.driver.find_element_by_css_selector('div#ID').click() # ...

  7. MySQL实战 | 04 为什么要使用索引？

    原文链接:MySQL实战 | 为什么要使用索引? 用过 MySQL 的应该都知道索引是干啥的吧,应该多少都设置过索引,但是若是问你索引是怎么实现的,你能说上来吗? 索引是什么? MySQL 官方对索引 ...

  8. Nginx——安装Nginx（二）

    安装所需环境 Nginx 是 C语言 开发,建议在 Linux 上运行,当然,也可以安装 Windows 版本,本篇则使用 CentOS 7 作为安装环境. gcc 安装 安装 nginx 需要先将官 ...

  9. Tencent Server Web 安装试用

    Tencent Server Web 安装试用 私有环境搭建,使用docker-compose 进行memcache 安装 参考github 代码 https://github.com/rongfen ...

  10. testem方便的web tdd 测试框架使用

    备注:    单元测试,对于日常的开发是比较重要的,testem 简化了我们的代码编写,以及运行.    主要特性:    a. 支持的测试框架有:jasmine quint mocha buster ...