<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择地址</title>
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#l-map{height:450px;width:100%;}
</style>
<style type="text/css">
.anchorBL{
display:none;
}
</style>
<style type="text/css">
.infoBoxContent{font-size:12px;}
.infoBoxContent .title{background:#4499ef no-repeat;height:42px;width:272px;}
.infoBoxContent .title strong{font-size:12px;line-height:42px;padding:0 10px 0 5px;}
.infoBoxContent .title .price{color:#FFFF00;}
.infoBoxContent .list{width:270px;border:solid 1px #4FA5FC;border-top:none;background:#fff;height:260px;}
.infoBoxContent .list ul{margin:0;padding:5px;list-style:none;}
.infoBoxContent .list ul li {float:left;width:255px;border-bottom:solid 1px #4FA5FC;padding:2px 0;}
.infoBoxContent .list ul .last{border:none;}
.infoBoxContent .list ul img{width:53px;height:42px;margin-right:5px;}
.infoBoxContent .list ul p{padding:0;margin:0;}
.infoBoxContent .left{float:left;}
.infoBoxContent .rmb{float:right;color:#EB6100;font-size:12px;font-weight:bold;}
.infoBoxContent a{color:#0041D9;text-decoration:none;}
</style>
<script src="js/mui.min.js"></script>
<script src="js/Com.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-2.1.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=8mgqpL1oAC4TWNzuzQKBKzYVLGW8oyhY&services=&t=20170517145936"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></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" />
<script type="text/javascript" src="js/InfoBox_min.js"></script>
</head>
<body>
<div id="result"><input type="text" align="center" id="keyword"/>
<button id="btn_submit1" onclick="searchKeyword()">确定</button>
</div>
<div id="l-map"></div>
<div id="r-result">
</div>
</body>
</html>
<script type="text/javascript">
/*mui.init({
swipeBack: true //Boolean(默认false)启用右滑关闭功能
});*/
// 百度地图API功能
var map = new BMap.Map("l-map",{enableMapClick:false});
map.centerAndZoom("合肥", 13);
map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
map.addControl(new BMap.NavigationControl()); //添加平移缩放控件
//map.addControl(new BMap.ScaleControl()); //添加比例尺控件
var local = new BMap.LocalSearch(map, {
renderOptions:{map: map}
});
//map.disableDragging();//禁止拖拽
//map.addControl(new BMap.OverviewMapControl({isOpen: true})); //添加缩略地图控件
function searchKeyword(){
var keyword=document.getElementById("keyword").value;
local.search(keyword);
}
$('#map div.anchorBL').remove();
var index = 0;
var myGeo = new BMap.Geocoder();
var adds=[
{
"id" :"001",
"color" :"#5bbcd4",
"name" :"安徽大市场"
}, {
"id" :"0002",
"color" :"#eb5c5f",
"name" :"安徽省环保厅"
}
];
$(function() {
//var adds="";
var add11=new Array();
function getbz(){
mui.ajax('http://192.168.1.107:8080/nutznull/private/sys/map/getjsonxx',{
dataType:'json',//服务器返回json格式数据
type:'get',//HTTP请求类型
crossDomain: true, //强制使用5+跨域
timeout:10000,//超时时间设置为10秒；
async:true,
success:function(data){
for(var i=0;i<data.length;i++){
add11.push(data[i]);
}
console.log(add11);
adds=uniq(add11);
bdGEO();
},
error:function(xhr,type,errorThrown){
//异常处理；
console.log(type);
}
});
}
if(supportsGeoLocation()) {
} else {
mui.toast("不支持 GeoLocation.");
}
// 检测浏览器是否支持HTML5
function supportsGeoLocation() {
return !!navigator.geolocation;
}
// 单次位置请求执行的函数
function getLocation() {
navigator.geolocation.getCurrentPosition(mapIt, locationError);
}
//定位成功时，执行的函数
function mapIt(position) {
var lon = position.coords.longitude;
var lat = position.coords.latitude;
// mui.toast("您位置的经度是："+lon+" 纬度是："+lat);
point = new BMap.Point("" + lon + "", "" + lat + "");
map.panTo(point);
var gc = new BMap.Geocoder();
translateCallback = function(point) {
var myIcon = new BMap.Icon("http://www.yantiansf.cn/mapImage/1.gif", new BMap.Size(30,30),{
anchor:new BMap.Size(13,15),
imageOffset:new BMap.Size(0,0)
});
var marker = new BMap.Marker(point,{icon:myIcon});
map.addOverlay(marker);
map.setCenter(point);
var circle = new BMap.Circle(point,1000,{strokeColor:"red",fillColor: "#E2E8F1", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
map.addOverlay(circle);
}
BMap.Convertor.translate(point, 0, translateCallback);
}
function locationError(error) {
console.log(444);
switch(error.code) {
case error.PERMISSION_DENIED:
mui.toast("定位失败！");
break;
case error.POSITION_UNAVAILABLE:
mui.toast("位置信息不可用!");
break;
case error.TIMEOUT:
mui.toast("获取位置请求超时!");
break;
case error.UNKNOWN_ERROR:
mui.toast("发生未知错误!");
break;
}
}
window.onload = function(){
getLocation();
//getbz();
bdGEO();
}
//调用加载页面方法
function bdGEO(){
console.log(adds);
for (var i=0;i<adds.length;i++){
var add = adds[i];
console.log(add);
geocodeSearch(add);
}
}
function geocodeSearch(add){
myGeo.getPoint(add.name, function(point){
if (point) {
var address = new BMap.Point(point.lng, point.lat);
console.log(address.lng);
addMarker(address,add.id,add.name,add.color);
}
}, "安徽省合肥市");
}
// 编写自定义函数,创建标注
function addMarker(point,id,name,color){
var label =new BMap.Label(name,{offset:new BMap.Size(15,-3)});
var pcurl = "images/test.png";
if(id=="0001"){
pcurl = "images/test.png";
}else if(id=="0002"){
pcurl = "images/test1.png";
}
var myIcon = new BMap.Icon(pcurl, new BMap.Size(16,14));
var marker = new BMap.Marker(point,{icon:myIcon});
//marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
label.setStyle({
color : color,
fontSize : "12px",
height : "20px",
//lineHeight : "20px",
fontFamily:"微软雅黑",
backgroundColor:"rgba(255,255,255,0)",
border:"none"
});
map.addOverlay(marker);
marker.setLabel(label);
marker.addEventListener("touchstart", function () {
map.disableDragging(); //禁用地图拖拽功能
});
marker.addEventListener("click", function () {
//var sContent ="<table width=\"100%\" cellpadding=\"1\" cellspacing=\"1\" border=\"1\" style=\"padding-top: 15px;\"> "+
//"<th>姓名</th><th>性别</th><th>年龄</th><th>电话号码</th>";
//sContent+="<tr><td>LUO</td><td>男</td><td>28 </td><td>18356038578</td></tr> ";
// 创建信息窗口对象
//var infoWindow = new BMap.InfoWindow(sContent);
//marker.openInfoWindow(infoWindow);
var html = ["<div class='infoBoxContent'><div class='title'><strong>"+name+"</strong><span class='price'>均价43000</span></div>",
"<div class='list'><ul><li><div class='left'><img src='images/house1.jpg'/></div><div class='left'><a target='_blank' href='http://map.baidu.com'>中海雅园南北通透四居室</a><p>4室2厅，205.00平米，3层</p></div><div class='rmb'>760万</div></li>"
,"<li><div class='left'><img src='images/house1.jpg'/></div><div class='left'><a target='_blank' href='http://map.baidu.com'>中海雅园四居室还带保姆间</a><p>2室1厅，112.00平米，16层</p></div><div class='rmb'>300万</div></li>"
百度地图自定义窗口demo.zip （9个子文件） 
百度地图自定义窗口demo images 
house1.jpg 73KB
test.png 15KB test1.png 592B
60x60.gif 203B p1.png 433B cbd.jpg 140KB js 
InfoBox_min.js 11KB jquery-2.1.1.js 94KB
login1.html 11KB资源评论
chenxianda-32019-05-07先用着试试看
qq_337577652019-09-18先用着看看
