百度地图例子（通过景区坐标在百度地图上显示景区信息）

最新推荐文章于 2023-10-25 20:07:26 发布

weixin_34221112

最新推荐文章于 2023-10-25 20:07:26 发布

阅读量809

点赞数

文章标签： javascript json python ViewUI

原文链接：https://my.oschina.net/stonezing/blog/101116

版权

2019独角兽企业重金招聘Python工程师标准>>>

今天看到了百度地图上可以标识景区的功能，特做了个demo，秀一下哈....要得到某个景区，如深圳市世界之窗，那得先得到他的经纬度，

点击红点后出现

http://api.map.baidu.com/geocoder?address=深圳市世界之窗&output=json&key=37492c0ee6f924cb5e934fa08c6b1676

从中可得到

{status: '字符串状态常量', 取值如下：

//OK 成功

INVILID_KEY 非法密钥

INVALID_PARAMETERS 非法参数，参数错误时候给出。

result: {

location: {

lat: 纬度：数值，

lng: 经度：数值

precise:’位置的附加信息，是否精确查找’（1为精确查找，0为不精确查找）,

confidence: 可信度,

level:'级别'

}

参数说明：

output	否	json	json或xml	输出格式为json或者xml
address	是	无	北京市海淀区上地十街10号	根据指定地址进行坐标的反定向解析
location	是	无	38.76623,116.43213 lat<纬度>,lng<经度>	根据指定坐标来进行地址的解析
city	否	“北京市”	“广州市”	地址所在的城市名
key	是	无	8cb976834235d8cbcde2dce4835ae191	用户申请注册的key

返回结果（地址解析的结果）

在网页中的使用:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<title>添加复杂内容的信息窗口</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
var sContent =
"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>世界之窗</h4>" +
"<img style='float:right;margin:4px' id='imgDemo' src='http://app.baidu.com/map/images/tiananmen.jpg' width='139' height='104' title='世界之窗'/>" +
"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>亲，这就是世界之窗...</p>" +
"</div>";
var map = new BMap.Map("allmap");
//这个是直接定位经纬度，
//var point = new BMap.Point(113.981325, 22.542315);

// 创建地址解析器实例
var myGeo = new BMap.Geocoder();
var infoWindow = new BMap.InfoWindow(sContent);
// 将地址解析结果显示在地图上,并调整地图视野
myGeo.getPoint( "深圳市世界之窗 " , function (point){
if (point) {
    var marker = new BMap.Marker(point)
    map.centerAndZoom(point, 13 );
map.addOverlay( marker);

marker.addEventListener("mouseover", function(){
    this.openInfoWindow(infoWindow);

//图片加载完毕重绘infowindow
    document.getElementById('imgDemo').onload = function (){
     infoWindow.redraw();
    }