百度地图的标注、提示、划线的操作

时间：2016-3-4 已查看2325次

<script type="text/javascript">

	// 百度地图API功能
	var map = new BMap.Map("allmap");
	var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});
	var top_left_navigation = new BMap.NavigationControl();
	var mapType1 = new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]});
	var lon=null;
	var lat=null;

    var icon =new BMap.Icon('http://images.51cto.com/files/uploadimg/20110916/1040053.png', new BMap.Size(20, 32), {
        anchor: new BMap.Size(10, 30),
        infoWindowAnchor: new BMap.Size(10, 0)
    });

	function theLocation(){
		@if(isset($city->lon))
			lon = {{$city->lon}};
		@endif
		@if(isset($city->lat))
			lat = {{$city->lat}};
		@endif

		if (lon == null || lat == null ){
			var city = "{{$city->city_name}}";
			if(city != ""){
				map.centerAndZoom(city,12);      // 用城市名设置地图中心点
			}
		} else {
			var point = new BMap.Point(lon, lat);
			map.centerAndZoom(point,12);
			var marker = new BMap.Marker(point,{icon:icon});
			map.addOverlay(marker);
			//marker.setAnimation(BMAP_ANIMATION_BOUNCE);
		}

    var point2 = new BMap.Point(116.399, 39.910);
    map.centerAndZoom(point2,12);
    var marker2 = new BMap.Marker(point2,{icon:icon});
    //创建信息窗口
    var opts2 = {
        width : 250,     // 信息窗口宽度
        height: 100,     // 信息窗口高度
        title : "Hello"  // 信息窗口标题
    }
    var infoWindow2 = new BMap.InfoWindow("World", opts2);  // 创建信息窗口对象
    marker2.addEventListener("click",function(){ //点击标注时出发事件
        marker2.openInfoWindow(infoWindow2, point2);      // 打开信息窗口
    });
    map.addOverlay(marker2);


    var point3 = new BMap.Point(116.405, 39.920);
    map.centerAndZoom(point3,12);
    var marker3 = new BMap.Marker(point3,{icon:icon});
    map.addOverlay(marker3);

    var point4 = new BMap.Point(117.321, 40.321);
    map.centerAndZoom(point4,12);
    var marker4 = new BMap.Marker(point4,{icon:icon});
    map.addOverlay(marker4);

    //折线
    var polyline = new BMap.Polyline([
        point2,
        point3,
        point4
    ],
        {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}  //蓝色、宽度为6
    );
    map.addOverlay(polyline);


    map.enableScrollWheelZoom();
		map.enableContinuousZoom();
		map.addControl(top_left_control);
		map.addControl(top_left_navigation);
		map.addControl(mapType1);
		map.setDefaultCursor("pointer");
	}
	map.addEventListener("click",function(e){
		window.setlocation(e.point.lng, e.point.lat);
		var gc = new BMap.Geocoder();
		var pt = new BMap.Point(e.point.lng,e.point.lat);
		var dress = gc.getLocation(pt, function(rs){
	    	var addComp = rs.addressComponents;
			var place = addComp.city+addComp.district+addComp.street+addComp.streetNumber;
			if (addComp.province != addComp.city) place = addComp.province+place;
			window.setAddress(place);
		});
	});
	window.onload=theLocation();
	</script>

	<script type="text/javascript">
	function setlocation(lon,lat){ $("#lon").val(lon); $("#lat").val(lat); }
	function setAddress(place) { $("#place").val(place); }
	</script>