web地图小试

最新推荐文章于 2024-09-14 15:26:51 发布

focusforce

最新推荐文章于 2024-09-14 15:26:51 发布

阅读量697

点赞数

分类专栏： JavaScript 文章标签： web xhtml html function 百度 input

本文链接：https://blog.csdn.net/focusforce/article/details/5718794

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近想在网页嵌入地图，以展示公司地址以及周边环境。截图吧，感觉太古老，就试了下在线地图。

第一个试的是搜狗地图，它用的是go2map，要注册一大堆信息，然后下载代码。我下载一直没成功，也不知道这个代码是啥代码，作罢。

第二个用的是百度，需要先“注册百度地图API密钥”，注册完了又注册百度，总算搞定了。看了下demo，一上来就是根据经纬度定义坐标点和标注地点。想在地图上直接获取经纬度，费了好大劲没成功。只好逆向利用demo，先根据地点获取坐标点，再获取经纬度。

<html>
<head>
<meta http-equiv="Content-Type" content="text ml; charset=utf-8">
<title>BaiduMap获取坐标</title>
<script type="text/javascript" src=" http://api.map.baidu.com/api?key=3eb552b96bc6d2a147fe6503176b267c&v=1.0&services=true" ></script>
</head>
<body>
<div style="position:absolute;width:730px;height:590px;top:50;left:0;border:1px solid gray;overflow-y:hidden;" id="container"></div>
<input id="text_" type="text" value=""/>
<input type="button" value="查找" onClick="searchByStationName();">
</body>
<script>
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(121.480,31.220), 6);

var localSearch= new BMap.LocalSearch (map, {
   renderOptions: {
     pageCapacity: 8,
     autoViewport: true,
    selectFirstResult: false
   }
});

localSearch.enableAutoViewport();
function searchByStationName()
{

    var keyword = document.getElementById("text_").value;
    localSearch.setSearchCompleteCallback(function(searchResult){
        var poi = searchResult.getPoi(0);
        alert(poi.point.lng+"   "+poi.point.lat);
        map.centerAndZoom(poi.point, 8);
    });
    localSearch.search(keyword);

}
</script>
</html>

找到需要的点的坐标以后，写了个demo，蛮好用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BaiduMap</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=3eb552b96bc6d2a147fe6503176b267c&v=1.0&services=true"></script>
</head>
<body>
<div style="width:670px;height:440px;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");          // 创建地图实例
var point = new BMap.Point(118.76631,31.998139); // 创建点坐标
map.centerAndZoom(point, 17);                 // 初始化地图，设置中心点坐标和地图级别
var local = new BMap.LocalSearch(map, {
renderOptions:{map: map, autoViewport:true}
});
local.searchNearby("雨花科技创业中心第二分部", "94号");
</script>

第三个用了下google，也需要注册地图API密钥。仅利用statismap看了下效果，生成图片嵌入页面，这里也需要获取坐标，但获取方式很方便，在http://ditu.google.cn/的地图上选中某个地点，然后右键“这儿是什么？”，坐标会自动显示到搜索的输入框里。statismap其实相当于截图，但图片效果很好很清晰。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>google map</title>
</head>

<body>
<img src="http://ditu.google.cn/staticmap?center=31.99243556290297,118.75994324684143&zoom=17&size=670x500&maptype=mobile/
&markers=31.99243556290297,118.75994324684143,reda&key=ABQIAAAAH-4d9qOcccfiqEJMEb5CQhT3D2Q0KJrz5GLZmfQIK1O4KxShIRQLCf3vlg99uOjJGIBrfD1Xr4bLqQ&sensor=true_or_false" alt="南京托恩康听力设备有限责任公司"/>
</body>
</html>