百度地图API的应用
来源:互联网 发布:云脉文档识别 mac 编辑:程序博客网 时间:2024/04/29 22:01
1.先了解一下百度地图的API,具体地址可参考百度地图API--->http://lbsyun.baidu.com/jsdemo.htm#i8_1
使用API前,需要在百度开发平台进行注册,详细操作参考官网
2.jsp中引用百度地图API的实例
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">body, html, #allmap {width: 100%;height: 100%;overflow: hidden;margin: 0;font-family: "微软雅黑";}</style><script type="text/javascript"src="http://api.map.baidu.com/api?v=2.0&ak=百度开发者的KEYsrc="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script><script type="text/javascript"src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script><title>IP定位</title></head><body><div id="allmap"></div></body><script type="text/javascript">var map = new BMap.Map("allmap");//初化地图var point = new BMap.Point(116.331398,39.897445);// 创建点坐标map.centerAndZoom(point, 16);// 初始化地图,设置中心点坐标和地图级别map.enableScrollWheelZoom(); //开启鼠标滚轮缩放/* 创建辅助工作(放大、缩小、地图显示效果切换) */map.addControl(new BMap.NavigationControl());// map.addControl(new BMap.ScaleControl()); // map.addControl(new BMap.OverviewMapControl()); // map.addControl(new BMap.MapTypeControl()); // 检测浏览器是否支持HTML5if (supportsGeoLocation()) {/*浏览器定位 */var geolocation = new BMap.Geolocation();geolocation.getCurrentPosition(function(r) {if (this.getStatus() == BMAP_STATUS_SUCCESS) {var mk = new BMap.Marker(r.point);map.addOverlay(mk);map.panTo(r.point);//alert('您的位置:'+r.point.lng+','+r.point.lat);showAddress(mk, r);} else {alert('定位失败');}}, {enableHighAccuracy : true});} else {alert("您的浏览器不支持使用HTML 5来获取地理位置服务");}function supportsGeoLocation() {return !!navigator.geolocation;}/*=================================== *///获取定位地址function showAddress(mk, r) {// 创建地理编码实例 var myGeo = new BMap.Geocoder();// 根据坐标得到地址描述 myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat),function(result) {if (result) {//alert(result.address); var labelbaidu = new BMap.Label(result.address, {offset : new BMap.Size(50, -10)});mk.setLabel(labelbaidu); //添加百度标注 }});}//可以绑定事件// map.addEventListener("click", function(){ // alert("您点击了地图。"); // });// map.addEventListener("touchmove", function(){ // alert("touchmove您点击了地图。"); // });</script></html>
3.测试时注意:使用浏览器测试时,定位不准确,相差较大;必须在手机上测试,使用手机上浏览器进行测试;
必须注意手机WIFI跟PC机的IP是否同一个网段,还在注意PC机,访问的端口有没有开放,或直接关闭防火墙。
定位成功结果图片:
阅读全文
0 0
- 百度地图API的应用
- 百度地图API的应用
- 百度地图API 应用
- 百度地图API应用
- 应用百度地图API
- 百度地图BMap API的应用实例
- 百度地图API的一点应用
- 百度地图BMap API的应用实例
- 百度地图BMap API的应用实例
- 百度地图BMap API的应用实例
- 百度地图BMap API的应用实例
- 百度地图API的一些应用
- 百度地图api的简单应用
- 百度地图的JS开发API应用
- 百度地图API的简单应用
- 百度地图api应用,百度地图gis
- 百度地图API应用以及对地图的一些操作
- 百度地图API 应用实例
- spring注解@Profile的使用案例,并注解测试用例演示,根据不同的条件实例化不同的bean
- iOS算法总结-希尔排序
- Spring mvc中前后端数据交互的方式
- 79. Word Search
- Kotlin有趣的地方
- 百度地图API的应用
- vsCode编辑器插件推荐
- 2017-10-30考试代码
- Oracle 多租户CDB/PDB操作汇总
- JSP下Statement存在SQL注入攻击漏洞验证
- How to Visualize Your Recurrent Neural Network with Attention in Keras
- Oracle “dba_tables”介绍
- redis 与 数据库(Mysql)同步
- 微信公众号支付(已封装和未封装)