极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
padding: 0;
margin: 0 auto;
}
#demo{
width: 100%;
}
</style></head>
<body>
<div id="demo"></div>
<select name="" id="province" value="">
<option value="">请选择</option>
<option value="广东省">广东省</option>
<option value="北京省">北京省</option></select>
<select name="" id="city" disabled="disabled" value="">
<option value="">请选择</option>
<option value="广州市">广州市</option></select>
<select name="" id="area" disabled="disabled" value="" >
<option value="">请选择</option>
<option value="海珠区">海珠区</option>
<option value="天河区">天河区</option>
<option value="黄埔区">黄埔区</option>
<option value="越秀区">越秀区</option>
<option value="从化区">从化区</option></select>
<input type="button" class="btn" value="搜索">
<div class="add_result"></div>
</body>
<script src="http://code.jquery.com/jquery...;></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?...;ak=BNfhaSSFf3ZzQCpqXvqgWOeGFKty46cG"></script>
<script>
$('#province').change(function () {
if($('#province').val()!=''){
$('#city').removeAttr('disabled')
}else{
$('#city').attr('disabled','disabled')
}
})
$('#city').change(function () {
if($('#province').val()!=''){
$('#area').removeAttr('disabled')
}else{
$('#area').attr('disabled','disabled')
}
})
$('#demo').height($(window).height()/1.2)
var map = new BMap.Map("demo");
function replaceIcon(iconPath, marker, sizeW, sizeH) {
map.removeOverlay(marker);
var icons = iconPath; //这个是你要显示坐标的图片的相对路径
var icon = new BMap.Icon(icons, new BMap.Size(sizeW, sizeH)); //显示图标大小
marker.setIcon(icon);//设置标签的图标为自定义图标
map.addOverlay(marker);//将标签添加到地图中去
}
map.enableScrollWheelZoom(true);
// var myIcon = new BMap.Icon("http://a.tiles.mapbox.com/v3/marker/pin-m-w+009f9f.png", new BMap.Size(50,50),{imageOffset:new BMap.Size(0,0)});
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
marker2= new BMap.Marker(r.point);
map.centerAndZoom(r.point, 16);
var iconPath='http://a.tiles.mapbox.com/v3/marker/pin-m-w+009f9f.png';
replaceIcon(iconPath, marker2, 40, 40);
map.addOverlay(marker2);
// map.panTo(r.point);
}
else {
alert('failed'+this.getStatus());
}
});
var marker2;
function sear(addr) {
var local = new BMap.LocalSearch(map, {
renderOptions:{map: map},
onSearchComplete:function (getLocalResult) {
map.clearOverlays();
console.log(getLocalResult)
for(var i= 0;i<getLocalResult.Ar.length;i++){
$('<li>'+getLocalResult.Ar[i].title+'</li>').appendTo('.add_result');
marker2 = new BMap.Marker(getLocalResult.Ar[i].point); // 创建标注
var iconPath='http://a.tiles.mapbox.com/v3/marker/pin-m-w+009f9f.png';
replaceIcon(iconPath, marker2, 40, 40);
map.addOverlay(marker2);
}
}
});
local.search(addr);
}$('.btn').click(function () {
var addr=$('#province').val()+$('#city').val()+$('#area').val()+'麦当劳';
sear(addr);})
</script>
</html>
html5
将map：map那段删除即可