本文详细介绍了如何使用腾讯地图API来处理和转换客户地址数据，将其转化为电脑可读的格式，通过编写HTML代码实现地图上信息窗口的标注。步骤包括源数据处理、数据转换、程序生成、源数据处理、程序运行和地图生成。最终，通过点击“批量地址解析”按钮，地图上将显示出标注的客户位置。
Step1：源数据处理
- 打开Excel客户资料表（不是Excel格式的，把地址COPY到我们的客户资料模板Excel中）
- 把客户地址栏放于第二栏
Step2：数据转换
- 这一步的目的是要把客户的地址转化成电脑能读懂的语言，因此，要利用一个公式，在第三栏第一行输入公式，不用看明白，你也可以不用管，直接用我的模板！=CHAR(34)&A1&""&CHAR(34)&", "
- 回车！一个地址就生成了；如果你是使用我的模板，那么这一步可以跳过。
- 直接下拉后生成对应列的所有代码文字。
Step3：程序生成
- 右键新建一个TXT文件
- COPY以下整个网页代码到TXT文件中
代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>批量地址</title>
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#l-map{height:800px;width:100%;}
#r-result{width:100%; font-size:14px;line-height:20px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=QyzhknTS8gkORRRC0pGItHkP"></script>
</head>
<body>
<div id="l-map"></div>
<div id="r-result">
<input type="button" value="批量地址解析" οnclick="bdGEO()" />
<div id="result"></div>
</div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("l-map");
map.centerAndZoom(new BMap.Point(123.440652,41.810539), 13);
map.enableScrollWheelZoom(true);
var index = 0;
var myGeo = new BMap.Geocoder();
var adds = [
"广厦绿园",
"中铁香湖",
"美的城"
];
var opts = {
width: 250, // 信息窗口宽度
height: 50, // 信息窗口高度
// title: "信息窗口", // 信息窗口标题
enableMessage: false//设置允许信息窗发送短息
};
function bdGEO() {
var add = adds[index];
geocodeSearch(add);
index++;
}
function addClickHandler(content, marker) {
marker.addEventListener("mouseover", function (e) {
openInfo(content, e)
}
);
}
function openInfo(content, e) {
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, point); //开启信息窗口
}
function geocodeSearch(add) {
if (index < adds.length-1) {
setTimeout(window.bdGEO, 400);
}
myGeo.getPoint(add, function (point) {
if (point) {
document.getElementById("result").innerHTML += index + "、" + add + ":" + point.lng + "," + point.lat + "</br></br>";
var address = new BMap.Point(point.lng, point.lat);
addMarker(address,add);
}
}, "沈阳市");
} // 编写自定义函数,创建标注
function addMarker(point, content) {
var marker = new BMap.Marker(point);
map.addOverlay(marker);
addClickHandler(content, marker);
// marker.setLabel(label);
}
</script>
备注：
第一处红色标注部分：是所在城市的经纬度数据，现在这个是沈阳的，其他城市可以上网查该城市的经纬度数据，保留小数点后六位。
沈阳（123.440652,41.810539）
第二处红色标注部分：是客户地址数据，要把既定格式的客户数据替换进去。后面会介绍如何将excel的数据转成这样的格式。
第三处红色标注部分：红色标注部分这里修改为所在的城市，这样在客户地址没有填城市名称时，也会默认在定位到所在城市。
Step4：源数据处理
- COPY后如下图一，找到其中的地址栏
- 打开刚才制作的excel文件代码中的文字全部COPY到TXT文件的的地址部分。（直接选择所有单元格后，在TXT文件中粘贴即可）
Step5：程序生成
- 直接Ctrl+S保存。记得把扩展名改为html；还有编码，改为第二个UTF-8选项。
- 保存！
Step6：程序运行
- 打开刚才保存的后缀为html格式的文件
- 如果用电脑打开是个空白页面，点击提示栏——允许阻止的内容；弹出安全警告对话框，选“是”。
Step7：地图生成
- 点开后只有空白的地图！不要着急！把右边滑动栏滑至最底。
- 会看到左下角出现一个按钮“批量地址解析”，点击。
- 接下来就是耐心等待，等待全部数据解析出来后，标注会一个个显示出来。
- 接下来，根据自己需要，缩放显示，然后截图应用就OK啦！
附件：
沈阳客户点标记地图（编辑文本）.txtpan.baidu.com 客户资料（程序法）.xlsxpan.baidu.com 沈阳客户点标记地图（编辑文本）.htmlpan.baidu.com
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
