百度地图v3的创建及定位的生成(包含地址详情)

百度地图开发API
百度地图API可视化文档
效果图如下:
位置点的样式需要通过样式自行调整
在这里插入图片描述

  • css代码(用于控制坐标点样式)
	.BMap_Marker>div {
      background-image: url(/public/index/img/hongtai-pc/markers.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }

    .BMap_Marker>div>img {
      display: none !important;
    }
  • js代码:
//引入的ak由百度地图注册生成
<script src="http://api.map.baidu.com/getscript?v=3.0&ak=***************"></script>
<script>
	function initialize() {
		var myGeo = new BMap.Geocoder();
	    // 将地址解析结果显示在地图上,并调整地图视野
	    myGeo.getPoint('输入需要搜索的地址用于获取点坐标', function (po) {
	    	var map = new BMap.Map("map"); // 创建地图实例
	    	var point = new BMap.Point(po.lat, po.lng); // 创建点坐标
	    	map.enableScrollWheelZoom(true);
	    	map.centerAndZoom(point, 13);
	    	// var infoWindow = new BMap.InfoWindow("泓泰资本"); // 创建信息窗口对象
	    	var local = new BMap.LocalSearch(map, {
	    		renderOptions: {
	    			map: map,
	        		autoViewport: true
	       		},
	        	pageCapacity: 1,
	        	enableFirstResultSelection: true, //自动采用第一个搜索结果 
	        	searchNearby: point //以中心点圆形搜索
	    	});
	    	local.search('需要搜索的地址');
	    	local.setSearchCompleteCallback(function (searchResult) {
	    		var Oinfo = searchResult.getPoi(0);
	    		Oinfo.title = '提示框需要显示的名称';
	    		Oinfo.address = '提示框需要显示位置的地址" /}';
		   		Oinfo.phoneNumber = '提示框需要显示的电话';
	    		local = new BMap.LocalSearch(searchResult, {
	    			renderOptions: {
	        			map: map,
	            	  	autoViewport: true
	        		},
	       			pageCapacity: 1,
	       			enableFirstResultSelection: true,
	        		searchNearby: point
	    		});
	   		});
	 	})
	}
	window.onload = initialize;
</script>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

DeviesBob

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值