标签：function map 拾取 var 关键字 ent lat lng 百度

HTML

<script src="//api.map.baidu.com/api?v=2.0&ak={:C('BAIDU_MAP_KEY_BROWER')}"></script>
<form class="layui-form">
	<div class="layui-form-item">
		<div class="layui-form-label">地图</div>
		<div class="layui-input-block map-container">
			<div id="map"></div>
			<div id="r-result"></div>
		</div>
	</div>
	<div class="layui-form-item">
		<div class="layui-input-block">
			<div class="layui-inline" style="width:300px;">
				<input name="lnglat" value="{$row[ent_maplng]},{$row[ent_maplat]}" class="layui-input" placeholder="经纬度坐标" />
			</div>
			<div class="layui-inline">
				<input id="map_keyword" class="layui-input" placeholder="搜索关键字" />
			</div>
		</div>
	</div>
	<div class="layui-form-item">
		<div class="layui-input-block">
			<button class="layui-btn" lay-submit lay-filter="*">保存</button>
		</div>
	</div>
</form>

JavaScript

layui.use(['form', 'layer', 'jquery'], function () {
	var form = layui.form
		, layer = layui.layer
		, $ = layui.jquery

	var map = new BMap.Map('map')
	//添加比例尺
	map.addControl(new BMap.NavigationControl())
	//设置中心点及缩放
	const center_lng = '{$row[ent_maplng]}' || 117.175815
	const center_lat = '{$row[ent_maplat]}' || 35.096036
	map.centerAndZoom(new BMap.Point(center_lng, center_lat), 17)
	var marker
	//初始化坐标点
	addMarker(center_lng, center_lat)
	//监听鼠标点击
	map.addEventListener("click", function (e) {
		//手动定义坐标
		addMarker(e.point.lng, e.point.lat)
	})

	function addMarker(lng, lat) {
		map.removeOverlay(marker) //清除覆盖物
		if (lng && lat) {
			var point = new BMap.Point(lng, lat)
			marker = new BMap.Marker(point) //创建标注
			map.addOverlay(marker) //将标注添加到地图中
			marker.setAnimation(BMAP_ANIMATION_BOUNCE) //跳起来
			$('[name=lnglat]').val(lng + "," + lat)
		}
	}

	//定义地图搜索
	var local = new BMap.LocalSearch(map, {
		renderOptions: {
			map: map
			, panel: "r-result"
		}
		, onInfoHtmlSet: function (res) {
			//通过搜索结果标记坐标
			addMarker(res.point.lng, res.point.lat)
		}
	})

	//通过关键字搜索
	$('#map_keyword').on('input propertychange', function () {
		local.search($(this).val())
	}).triggerHandler('input')

	form.on('submit(*)', function (e) {
		var lnglat = e.field.lnglat
			, ent_maplng = _.split(lnglat, ',')[0]
			, ent_maplat = _.split(lnglat, ',')[1]

		if (!ent_maplng || !ent_maplat) {
			layer.msg('坐标拾取有误', { icon: 5 })
			return false
		}
		var data = {
			ent_maplng: ent_maplng
			, ent_maplat: ent_maplat
		}

		$.post('__CONTROLLER__/ajax_store', data, function (res) {
			if (res.status == 1) {
				layer.msg('保存成功', { icon: 6 })
			} else {
				layer.msg(res.error, { icon: 5 })
			}
		})

		return false
	})

})

CSS

.map-container {
	display: flex;
	height: 400px;
	flex-direction: row;
}

#map {
	flex: 3;
}

#r-result {
	flex: 1;
	overflow-y: auto;
}

标签：function,map,拾取,var,关键字,ent,lat,lng,百度
来源： https://www.cnblogs.com/sunr/p/16671593.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。