基础地图功能模板

最新推荐文章于 2024-07-30 22:36:34 发布

铁皮书生

最新推荐文章于 2024-07-30 22:36:34 发布

阅读量216

点赞数

分类专栏： javascript HTML 基础地图模板文章标签： HTML javascript

本文链接：https://blog.csdn.net/kk907528318/article/details/86529724

版权

javascript 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

基础地图模板

1 篇文章 0 订阅

订阅专栏

前言：这是很久之前的工作中遇到的，今天跟之前的同事聊天时突然聊到了，所以就写个模板，防止工作中再次遇到却写不出来。

最基础的HLML版，用的百度地图的API。
点击地图可以获得详细地址，也可以输入文字进行搜索。

<html xmlns="http://www.w3.org/1999/xhtml">
	<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
{
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0;
	font-family: "微软雅黑";
}

#allmap
{
	width: 500px;
	height: 500px;
	overflow: hidden;
	margin: 0;
	font-family: "微软雅黑";
}
</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=********************"></script>//AK需要自己去百度地图开放平台注册，我的就不放上去了，哈哈。。。
	<title>地图展示</title>
	</head>
	<body>
<div id="r-result"> 城市名:
      <input id="cityName" type="text" style="width:100px; margin-right:10px;" />
      <input type="button" value="查询" onclick="theLocation()" />
    </div>
<div id="allmap"></div>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	var x;
	var y;
	// 百度地图API功能----------------------------------------------------------
	var map = new BMap.Map("allmap");    // 创建Map实例
	map.centerAndZoom(new BMap.Point(112.97935279, 28.21347823), 11);  // 初始化地图,设置中心点坐标和地图级别
	//添加地图类型控件
	map.addControl(new BMap.MapTypeControl({
		mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));	  
	map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	
	//浏览器定位--------------------------------------------------------------
	var point = new BMap.Point(x,y);

	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);
			y=r.point.lng;
			x=r.point.lat;
			alert('您的位置：'+r.point.lng+','+r.point.lat);//经纬度信息，用全局变量接收
		}
		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 新增)
	
	//点击地图获得详细地址---------------------------------------------------------------
	var point = new BMap.Point(x,y);
	map.centerAndZoom(point,12);
	var geoc = new BMap.Geocoder();    

	map.addEventListener("click", function(e){        
		var pt = e.point;
		geoc.getLocation(pt, function(rs){
			var addComp = rs.addressComponents;
			alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
		});        
	});
	
	
	//根据输入地址查询---------------------------------------------------------------
	var local = new BMap.LocalSearch(map, {
		renderOptions:{map: map}
	});
	
	function theLocation(){
		var city = document.getElementById("cityName").value;
		if(city != ""){
			local.search(city);      // 查询地址
		}
	}
	
		
</script>

吐槽一下，感觉定位不准，AK码需要自己去百度地图开放平台注册（免费的），我的就不放上去了，哈哈。。。
文件下载链接：
https://download.csdn.net/download/kk907528318/10924612

铁皮书生

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
基础地图功能模板

前言：这是很久之前的工作中遇到的，今天跟之前的同事聊天时突然聊到了，所以就写个模板，防止工作中再次遇到却写不出来。最基础的HLML版，用的百度地图的API。点击地图可以获得详细地址，也可以输入文字进行搜索。&amp;lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta http-equiv=&a
复制链接

扫一扫

专栏目录