zoukankan      html  css  js  c++  java
  • 百度地图api——保存(名片显示)

    保存:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head >
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5055b5d742bb54d01b846af239e54e6a"></script>
        <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
        <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
        <title>地理位置</title>
    	<style type="text/css">
    	#l-map{height:300px;100%;}
    		#r-result{100%;}
    	</style>
    	
    </head>
    <body>
        <form id="form1" action="/Zhuang/EditPost" method="post"> 
          
            <div style="float:left; margin-left:20px;">           
               <input id="jingwei" name="jingwei" type="text" class="w200" value="{$supplier.jingwei}"> // 此value为php保存数据方式 
            </div>
            <div>
                <div>
    <div id="l-map"></div>
    	<div id="r-result">请输入:<input type="text" id="suggestId" size="20" value="百度" style="150px;" /></div>
    	<div id="searchResultPanel" style="border:1px solid #C0C0C0;150px;height:auto; display:none;"></div>
     <script type="text/javascript">
    	// 百度地图API功能
    	function G(id) {
    		return document.getElementById(id);
    	}
    
    	var map = new BMap.Map("l-map");
    	map.centerAndZoom("北京",12);                   // 初始化地图,设置城市和地图级别。
    
     map.addEventListener("click",function(e){//点击事件,获取点击的经纬度
        document.getElementById('jingwei').value=e.point.lng+","+e.point.lat;//将获取的经纬度放入ID为“jingwei”的文本框里
    });
    
    	var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
    		{"input" : "suggestId"
    		,"location" : map
    	});
    
    	ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
    	var str = "";
    		var _value = e.fromitem.value;
    		var value = "";
    		if (e.fromitem.index > -1) {
    			value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
    		}    
    		str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
    		
    		value = "";
    		if (e.toitem.index > -1) {
    			_value = e.toitem.value;
    			value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
    		}    
    		str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
    		G("searchResultPanel").innerHTML = str;
    	});
    
    	var myValue;
    	ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
    	var _value = e.item.value;
    		myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
    		G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
    		
    		setPlace();
    	});
    
    	function setPlace(){
    		map.clearOverlays();    //清除地图上所有覆盖物
    		function myFun(){
    			var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
    			map.centerAndZoom(pp, 18);
    			map.addOverlay(new BMap.Marker(pp));    //添加标注
    		}
    		var local = new BMap.LocalSearch(map, { //智能搜索
    		  onSearchComplete: myFun
    		});
    		local.search(myValue);
    	}
    
    
    
    </script>
    			</div>
        </form>
    </body>
    </html>
    

      

  • 相关阅读:
    用原生js实现ajax、jsonp
    $.ajax()方法详解
    用原生js实现ajax
    escape()、encodeURI()、encodeURIComponent()区别详解
    stylus项目知识点
    vue之给a标签赋值
    iOS—网络实用技术OC篇&网络爬虫-使用java语言抓取网络数据
    iOS开发——高级语法篇&继承、实现、依赖、关联、聚合、组合的联系与区别
    iOS-性能优化4
    iOS-性能优化3
  • 原文地址:https://www.cnblogs.com/DotaSteam/p/5694450.html
Copyright © 2011-2022 走看看