微信小程序怎样经营_JS百度地图查找悬浮窗功用

摘要: JS百度搜索地形图检索飘浮窗作用 本文关键为大伙儿详尽详细介绍了JS百度搜索地形图检索飘浮窗作用,具备一定的参照使用价值,很感兴趣的小伙子伴们能够参照一下这一要求的...

JS百度地图搜索悬浮窗功能       这篇文章主要为大家详细介绍了JS百度地图搜索悬浮窗功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

这个需求的效果类似下面的截图,主要还是利用百度地图中自定义控件的功能,挺简单的。文档地址在这

效果图:

代码

 !DOCTYPE html 
 html 
 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%;margin:0;font-family:"微软雅黑";font-size:14px;}
 #l-map{height:300px;width:100%;}
 #r-result{width:100%;}
 /style 
 script type="text/javascript" src="api v=1.4" /script 
 title 关键字输入提示词条 /title 
 /head 
 body 
 div id="l-map" 
 /div 
 /body 
 /html 
 script type="text/javascript" 
 // 百度地图API功能
 function G(id) {
 return document.getElementById(id);
 var map = new BMap.Map("l-map");
 map.centerAndZoom("北京",10); // 初始化地图,设置城市和地图级别。
 // 定义一个控件类,即function
 function ZoomControl() {
 this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
 this.defaultOffset = new BMap.Size(10, 10);
 // 通过JavaScript的prototype属性继承于BMap.Control
 ZoomControl.prototype = new BMap.Control();
 // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
 // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
 ZoomControl.prototype.initialize = function(map){
 // 创建一个DOM元素
 var div = document.createElement("div");
 div.innerHTML = ' div id="r-result" 
 // 添加DOM元素到地图中
 map.getContainer().appendChild(div);
 // 将DOM元素返回
 return div;
 // 创建控件
 var myZoomCtrl = new ZoomControl();
 // 添加到地图当中
 map.addControl(myZoomCtrl);

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, 14); map.addOverlay(new BMap.Marker(pp)); //添加标注 var local = new BMap.LocalSearch(map, { //智能搜索 onSearchComplete: myFun local.search(myValue); /script

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:模板小程序