根据地址生成客户地图及热力图（百度地图API）

先看效果图：

使用百度地图API实现，目的很简单，因为经常会分析客户地图，通过客户居住/工作地址，自动生成标记点和热力图，做销售的朋友都懂，这可能是家常便饭。

要用到两个百度的API

 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的KEY"></script><script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>

生成地图：

var map = new BMap.Map("container");          // 创建地图实例var point = new BMap.Point(106.565336,29.561708);map.centerAndZoom(point, 13);             // 初始化地图，设置中心点坐标和地图级别map.enableScrollWheelZoom(); // 允许滚轮缩放

提交按钮的函数：核心是获取文本框的内容，转化为数组，传入geocodeSearch函数进行地址转化为坐标

function bdGEO(){adds=document.getElementById('input').value.split('\n');if (index < adds.length) {var add = adds[index];geocodeSearch(add);index++;};}

转化为坐标函数：将地址转化为坐标，传入标记生成函数addMarker，同时记录在points方便后面生成热力图

function geocodeSearch(add){if(index < adds.length){setTimeout(window.bdGEO,400);} myGeo.getPoint(add, function(point){if (point) {var address = new BMap.Point(point.lng, point.lat);var obj = {};obj["lng"] = address.lng;obj["lat"] = address.lat;obj["count"] = "50";points.push(obj);       addMarker(address,new BMap.Label(index+":"+add,{offset:new BMap.Size(10,-10)}));}}, "重庆市");}

生成标记点函数：

function addMarker(point,label){var marker = new BMap.Marker(point);map.addOverlay(marker);//marker.setLabel(label); 我没生成文字，所以注释掉了}

热力图初始化：

heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":50});map.addOverlay(heatmapOverlay);

显示热力图函数：重点是用刚刚生成标记的时候记录的points作为热力生成的data

function openHeatmap(){heatmapOverlay.setDataSet({data:points,max:100});heatmapOverlay.show();}

隐藏热力图函数：

function closeHeatmap(){heatmapOverlay.hide();}

完整代码：https://download.csdn.net/download/fangyango/20572798

根据地址生成客户地图及热力图（百度地图API）相关推荐

腾讯地图api php经纬度转换地址,腾讯地图经纬度转换为百度地图经纬度
‍ 利用微信来获取用户当前的详细地址是非常方便的,但是利用微信获取到用户的经纬度转换为具体地址时,老是出现误差很大,因此,决心把腾讯地图经纬度转换城百度地图经纬度,然后再‍利用百度地图api来获取详细 ...
android地图入门,android 百度地图入门01 (史上最详没有之一)
最近一直和百度地图打交道,写几篇博客记录一下吧,目前最新版是4.0的 ,之前我用的是3.7的, 就以4.0的为例说一下最基本的配置流程吧. 一.准备工作 1.申请一个百度地图开发者账户--地址:htt ...
c语言api获取百度地图,H5调用百度地图API获取地理位置
//获取当前位置 var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r){ alert ...
用html制作百度地图,canvas实现百度地图个性化底图绘制
精华 node-canvas实现百度地图个性化底图绘制发布于 3 年前作者 lzxue 11783 次浏览来自技术原文转自 #node-canvas实现百度地图个性化底图绘制随着nodej ...
前端调用高德地图app、百度地图app
前端调用高德地图app.百度地图app 说明:这里只说明了前端如何调用app地图,没有代码,测试机上高德地图.百度地图.腾讯地图,都已经安装好了,如果没有安装,调起app地图会没有反应,至于如何验证手 ...
android 百度地图 itemizedoverlay,[008] 百度地图API之ItemizedOverlay的使用(Android) .
本篇文章主要介绍如何在百度地图上添加Overlay(即图层或覆盖物). Overlay简介 Overlay通常被译为"图层"或"覆盖物".那么对于地图而言,什么 ...
android 百度地图 itemizedoverlay,[008] 百度地图API之ItemizedOverlay的使用(Android)
本篇文章主要介绍如何在百度地图上添加Overlay(即图层或覆盖物). Overlay简介 Overlay通常被译为"图层"或"覆盖物".那么对于地图而言,什么 ...
GPS坐标互转：WGS-84(GPS)、GCJ-02(Google地图)、BD-09(百度地图)
GPS坐标互转:WGS-84(GPS).GCJ-02(Google地图).BD-09(百度地图) WGS-84:是国际标准,GPS坐标(Google Earth使用.或者GPS模块) GCJ-02:中 ...
js处理腾讯地图经纬度转换百度地图经纬度
}) /** * 坐标转换,腾讯地图转换成百度地图坐标 * lng 腾讯经度(pointy) * lat 腾讯纬度(pointx ...
腾讯地图转换成百度地图坐标
https://www.jianshu.com/p/0fe30fcd4ae7 一.各个坐标系的概况众所周知地球是一个不规则椭圆体,GIS中的坐标系定义由基准面和地图投影两组参数确定,而基准面的定义则 ...

根据地址生成客户地图及热力图（百度地图API）

根据地址生成客户地图及热力图（百度地图API）相关推荐

最新文章

热门文章