html5 百度 google地图定位关键字搜索附近

最新推荐文章于 2023-11-15 15:16:31 发布

java_lilin

最新推荐文章于 2023-11-15 15:16:31 发布

阅读量2.3k

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/java_lilin/article/details/51859510

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

百度

<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=3dc63ef9e201999b7acf03d4828e45f0"></script>
<title>附近医院、药店</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能

var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function (r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
var mk = new BMap.Marker(r.point);

var map = new BMap.Map("allmap");
var point = new BMap.Point(r.point.lng, r.point.lat);
map.centerAndZoom(point, 14);

map.addOverlay(mk);
map.panTo(r.point);

map.enableScrollWheelZoom();
map.centerAndZoom(point, 15);

var circle = new BMap.Circle(point, 1000, { fillColor: "blue", strokeWeight: 1, fillOpacity: 0.3, strokeOpacity: 0.3 });
map.addOverlay(circle);
var local = new BMap.LocalSearch(map, { renderOptions: { map: map, autoViewport: false } });
local.searchNearby(['医院','药店'], point, 2000);

}
else {
alert('failed' + this.getStatus());
}
}, { enableHighAccuracy: true })
//关于状态码
//BMAP_STATUS_SUCCESS 检索成功。对应数值“0”。
//BMAP_STATUS_CITY_LIST 城市列表。对应数值“1”。
//BMAP_STATUS_UNKNOWN_LOCATION 位置结果未知。对应数值“2”。
//BMAP_STATUS_UNKNOWN_ROUTE 导航结果未知。对应数值“3”。
//BMAP_STATUS_INVALID_KEY 非法密钥。对应数值“4”。
//BMAP_STATUS_INVALID_REQUEST 非法请求。对应数值“5”。
//BMAP_STATUS_PERMISSION_DENIED 没有权限。对应数值“6”。(自 1.1 新增)
//BMAP_STATUS_SERVICE_UNAVAILABLE 服务不可用。对应数值“7”。(自 1.1 新增)
//BMAP_STATUS_TIMEOUT 超时。对应数值“8”。(自 1.1 新增)
</script>
<!--<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
var mPoint = new BMap.Point(116.404, 39.915);
map.enableScrollWheelZoom();
map.centerAndZoom(mPoint, 15);

var circle = new BMap.Circle(mPoint, 1000, { fillColor: "blue", strokeWeight: 1, fillOpacity: 0.3, strokeOpacity: 0.3 });
map.addOverlay(circle);
var local = new BMap.LocalSearch(map, { renderOptions: { map: map, autoViewport: false } });
local.searchNearby('餐馆', mPoint, 1000);

</script>-->

google

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAoeA9wWpE6hOgXNdyGlIaz4iQiehoetaE&libraries=places"></script>
<script type="text/javascript">
function callback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
var map;
var infowindow;

function init() {
if (navigator.geolocation) {
//获取当前地理位置
navigator.geolocation.getCurrentPosition(function (position) {
var coords = position.coords;
//console.log(position);
//指定一个google地图上的坐标点，同时指定该坐标点的横坐标和纵坐标
var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
var myOptions = {
zoom: 14, //设定放大倍数
center: latlng, //将地图中心点设定为指定的坐标点
mapTypeId: google.maps.MapTypeId.ROADMAP //指定地图类型
,showOnLoad : true
};
//创建地图，并在页面map中显示
map = new google.maps.Map(document.getElementById("map"), myOptions);
infowindow = new google.maps.InfoWindow();

var service = new google.maps.places.PlacesService(map);
service.nearbySearch({
location: latlng,
radius: 2000,
type: ['store']
},callback);

//打开提示窗口
},
function (error) {
//处理错误
switch (error.code) {
case 1:
alert("位置服务被拒绝。");
break;
case 2:
alert("暂时获取不到位置信息。");
break;
case 3:
alert("获取信息超时。");
break;
default:
alert("未知错误。");
break;
}
});
} else {
alert("你的浏览器不支持HTML5来获取地理位置信息。");
}
}
</script>
</head>
<body οnlοad="init()">
<div id="map" style="width: 100%; height: 600px"></div>
</body>
</html>

java_lilin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5 百度 google地图定位关键字搜索附近

body, html, #allmap { width: 100%; height: 100%; overflow: hidden; margin: 0; font-family: "微软雅黑"; } 附近医院、药店
复制链接

扫一扫