JavaScript学习---怎样引用显示百度地图

来源：互联网发布：蛇会主动攻击人吗知乎编辑：程序博客网时间：2024/06/06 00:37
<!DOCTYPE HTML><html><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width,target-densitydpi=device-dpi,initial-scale=1.0, user-scalable=no" /><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><title>HTML5 学习案例</title><link rel="stylesheet" href="css/main.css"><style type="text/css">html {height: 100%}body {height: 100%;margin: 0px;padding: 0px}#allmap {height: 100%}</style><script type="text/javascript"src="http://api.map.baidu.com/api?v=2.0&ak=XHDPar7ajC4hcnQZS5DPimj1"></script><script type="text/javascript"src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script></head><body><p id="demo"></p><button onclick="getLocationInMap()">地图显示位置</button><div id="allmap" style="width:auto;height:100%;border:0px solid gray"></div><script>var x = document.getElementById("demo");function getLocationInMap() {if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(showPositionInMap,showError);} else {x.innerHTML = "Geolocation is not supported by this browser.";}}function addMarker(point, index, name) { // 创建图标对象   var myIcon = new BMap.Icon("markers.png", new BMap.Size(23, 25), {// 指定定位位置。   // 当标注显示在地图上时，其所指向的地理位置距离图标左上    // 角各偏移10像素和25像素。您可以看到在本例中该位置即是   // 图标中央下端的尖角位置。    offset : new BMap.Size(10, 25),// 设置图片偏移。   // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您   // 需要指定大图的偏移位置，此做法与css sprites技术类似。    imageOffset : new BMap.Size(0, 0 - index * 25)});// 创建标注对象并添加到地图   var marker = new BMap.Marker(point, {icon : myIcon});map.addOverlay(marker);marker.addEventListener("click", showInfo);marker.stuName = name;}function showPositionInMap(position) {// 百度地图API功能var map = new BMap.Map("allmap");var point = new BMap.Point(position.coords.longitude,position.coords.latitude);map.centerAndZoom(point, 10);map.enableScrollWheelZoom();var b = new Array();b[0] = new BMap.Point(position.coords.longitude - 0.00001,position.coords.latitude - 0.00001);b[1] = new BMap.Point(position.coords.longitude + 0.00001,position.coords.latitude + 0.00001);map.setViewport(b);//alert("设置地图可视范围是：" + b[0].lng + "," + b[0].lat + "到" + b[1].lng//+ "," + b[1].lat);// 将地图显示范围设定在指定区域，地图拖出该区域后会重新弹回//var bs = new BMap.Bounds(b[0], b[1]);//try {//BMapLib.AreaRestriction.setBounds(map, bs);//} catch (e) {//alert(e);//}//获取地图显示范围bs = map.getBounds(); //获取可视区域var bssw = bs.getSouthWest(); //可视区域左下角var bsne = bs.getNorthEast(); //可视区域右上角alert("当前地图可视范围是：" + bssw.lng + "," + bssw.lat + "到" + bsne.lng+ "," + bsne.lat);var marker = new BMap.Marker(point); // 创建标注map.addOverlay(marker); // 将标注添加到地图中}function showError(error) {switch (error.code) {case error.PERMISSION_DENIED:x.innerHTML = "用户不同意地理定位请求.";break;case error.POSITION_UNAVAILABLE:x.innerHTML = "无法获取位置信息.";break;case error.TIMEOUT:x.innerHTML = "获取位置信息请求超时.";break;case error.UNKNOWN_ERROR:x.innerHTML = "发生未知错误.";break;}}</script></body></html>
0 0