码迷,mamicode.com
首页 > 其他好文 > 详细

map2.0简单应用

时间:2018-06-28 10:16:58      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:nload   containe   type   getc   height   tee   time   bug   成都   

<html>

<head>


<meta content="yes" name="apple-mobile-web-app-capable">
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=0.4,maximum-scale=0.4,user-scalable=no;">


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- <link rel="stylesheet" type="text/css" href="/stylesheets/css.css" title="default" /> -->


<title>确认到达</title>


<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=3rKIUIFBd3VXbc1gxObITON9"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
</head>
</head>

<body>

<!-- 腾讯定位(json地址) -->
<!-- <div id="pos-area" style=‘width:80%;hight:400px‘; margin-left:10%; font-size:40px;>
<p id="demo" style="font-size:40px;margin-left:2%;">点击下面的按钮,获得对应信息:<br /></p>
</div>


<div id="btn-area">
<button style="font-size:40px;margin-left:2%;" onclick="geolocation.getLocation(showPosition, showErr, options)">获取精确定位信息</button>
</div>
<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
<script type="text/JavaScript">
var geolocation = new qq.maps.Geolocation("OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77", "myapp");
var positionNum = 0;
var options = {timeout: 8000};
function showPosition(position) {
positionNum++;
document.getElementById("demo").appendChild(document.createElement(‘pre‘)).innerHTML = JSON.stringify(position, null, 4);
};
function showErr() {
positionNum++;
document.getElementById("demo").innerHTML += "序号:" + positionNum;
document.getElementById("demo").appendChild(document.createElement(‘p‘)).innerHTML = "定位失败!";
};
</script>-->





<div id="status" style="text-align: center"></div>
<div style="width:96%;height:800px;border:1px solid gray;margin:30px auto" id="container"></div>
<script type="text/javascript">
//默认地理位置设置为成都市高升桥
var x = 104, y = 30;
window.onload = function () {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
// 百度地图API功能

var map = new BMap.Map("container");
var point = new BMap.Point(x, y);
map.centerAndZoom(point, 16);

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);
var labelgg = new BMap.Label("我的位置", { offset: new BMap.Size(20, -10) });
mk.setLabel(labelgg); //添加GPS label
debugger
var ggPoint = new BMap.Point(105, 32);
var markergg = new BMap.Marker(ggPoint);
map.addOverlay(markergg); //添加GPS marker
var labelgg = new BMap.Label("他的位置", { offset: new BMap.Size(20, -10) });
markergg.setLabel(labelgg); //添加GPS label
//map.panTo(r.point);
}
else {
alert(‘failed‘ + this.getStatus());
}
}, { enableHighAccuracy: true })
return;
}
alert("你的浏览器不支持获取地理位置!");
};
function showPosition(position) {
x = position.coords.longitude;
y = position.coords.latitude;

setTimeout(function () {
var gpsPoint = new BMap.Point(x,y);
BMap.Convertor.translate(gpsPoint, 0, function (point) {
var geoc = new BMap.Geocoder();
geoc.getLocation(point, function (rs) {
// var addComp = rs.addressComponents;
// alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
});
});
}, 1000);
}
</script>
</body>

</html>

map2.0简单应用

标签:nload   containe   type   getc   height   tee   time   bug   成都   

原文地址:https://www.cnblogs.com/yanghuijs/p/9237090.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!