在地图上添加自己想要的功能模块
具体代码如下
var map;
window.onload = function () {
var myOptions = {
mapControl: false, //关闭默认的控件
mapTypeId: sogou.maps.MapTypeId.ROADMAP
}
map = new sogou.maps.Map(document.getElementById("map_canvas"), myOptions); //初始化地图 var homeControlDiv = document.createElement('DIV'); //创建
homeControlDiv.style.position = "absolute";
homeControlDiv.style.left = "20px";
homeControlDiv.style.top = "5px"; var homeControl = new HomeControl(homeControlDiv, map); //获取控件
map.getContainer().appendChild(homeControlDiv); //将控件添加到地图上 }
function HomeControl(controlDiv, map) { controlDiv.style.padding = '5px'; //测距功能
var goHomeText = document.createElement('DIV');
goHomeText.style.fontFamily = 'Arial,sans-serif';
goHomeText.style.backgroundColor = 'white';
goHomeText.style.cursor = 'pointer';
goHomeText.style.borderStyle = 'solid';
goHomeText.style.borderWidth = '1px';
goHomeText.style.borderColor = 'black';
goHomeText.style.fontSize = '12px';
goHomeText.style.textAlign = 'center';
goHomeText.style.float = 'left';
goHomeText.style.width = "60px";
goHomeText.innerHTML = '<b>测距</b>';
controlDiv.appendChild(goHomeText); //获取坐标
var SetZbText = document.createElement('DIV');
SetZbText.style.fontFamily = 'Arial,sans-serif';
SetZbText.style.backgroundColor = 'white';
SetZbText.style.cursor = 'pointer';
SetZbText.style.borderStyle = 'solid';
SetZbText.style.borderWidth = '1px';
SetZbText.style.borderColor = 'black';
SetZbText.style.fontSize = '12px';
SetZbText.style.textAlign = 'center';
SetZbText.style.float = 'left';
SetZbText.style.width = "60px";
SetZbText.innerHTML = '<b>获取坐标</b>';
controlDiv.appendChild(SetZbText); //清空多余描点
var setHomeText = document.createElement('DIV');
setHomeText.style.fontFamily = 'Arial,sans-serif';
setHomeText.style.backgroundColor = 'white';
setHomeText.style.cursor = 'pointer';
setHomeText.style.borderStyle = 'solid';
setHomeText.style.borderWidth = '1px';
setHomeText.style.borderColor = 'black';
setHomeText.style.fontSize = '12px';
setHomeText.style.textAlign = 'center';
setHomeText.style.float = 'left';
setHomeText.style.width = "60px";
setHomeText.innerHTML = '<b>清空</b>';
controlDiv.appendChild(setHomeText); }
代码效果为
动态为地图添加描点（可后台管理）
var map;
var MapZBs,Listener;
var num;
//获取类的唯一示例
function getInstance(a) {
a.hasOwnProperty("_instance") || (a._instance = new a);
return a._instance
}
window.onload = function () {
var myOptions = {
mapControl: false, //关闭默认的控件
mapTypeId: sogou.maps.MapTypeId.ROADMAP
}
map = new sogou.maps.Map(document.getElementById("map_canvas"), myOptions); //初始化地图 Marks(); //动态添加描点
}
//动态添加描点
function Marks() {
//ajax动态调取后台数据
var marks;
$.ajax({
type: "post",
contentType: "application/json",
url: "Index.aspx/GetMarks",
success: function (data) {
FxData(data.d);
}
})
}
//描点内容分析
function FxData(Data) {
var array = Data.split('|');
var HtmlCon = "";
for (var j = ; j < array.length; j++) {
if (array[j].toString() != "") {
var Yarr = array[j].split('&');
var TypeImages;
switch (Yarr[].toString()) {
case "": TypeImages = "images/b1.png"; break;
case "": TypeImages = "images/o1.png"; break;
case "": TypeImages = "images/r1.png"; break;
case "": TypeImages = "images/z1.png"; break;
}
HtmlCon += '<li id="mark' + (j + ) + '" class=""><h3 class="dining" style="background: url(' + TypeImages + ') no-repeat;background-size: 30px 30px;">' + Yarr[] + '</h3><div class="priceinfo2">' + Yarr[] + '</div></li>';
}
}
document.getElementById('tmd_data').innerHTML = HtmlCon; for (var i = ; i < array.length; i++) {
if (array[i].toString() != "") {
var Yarr = array[i].split('&');
AddMark(Yarr[], Yarr[], Yarr[], Yarr[], Yarr[], Yarr[], i, i);
}
}
}
//生成描点和弹出层
function AddMark(location, location1,Con,Title,ImgType,Images,mark,num) {
var location = new sogou.maps.Point(location, location1); //描点位置
//var location = new sogou.maps.LatLng(location, location1);
var TypeImages = "";
switch (ImgType) {
case "": TypeImages = "images/b1.png"; break;
case "": TypeImages = "images/o1.png"; break;
case "": TypeImages = "images/r1.png"; break;
case "": TypeImages = "images/z1.png"; break;
} mark = new sogou.maps.Marker({
position: location,
title: Title,
map: map,
icon: TypeImages,
isFixed:true//不允许被清除
}); var contentString = '<div class="Tan"><div class="wpic"><img src="data:images/' + Images+
'" /></div>' +
'<p>' + Con + '</p>' +
'</div>';
//创建窗体
var infowindow = new sogou.maps.InfoWindow({
content: contentString
});
var container = document.createElement('div'); //创建div
container.innerHTML = contentString; var tpn = new sogou.maps.ToolPanel();
tpn.setPanel(container);
sogou.maps.event.addDomListener(mark, 'click', function () {
infowindow.open(map, mark);
tpn.setPoint(this.getPosition());//搜索功能
tpn.setCallback(function (a) { infowindow.setContent(a, ) })
});
}
ajax后台代码为
[WebMethod]
public static string GetMarks()
{
string str = "";
DataTable dt = GetData();
foreach (DataRow rows in dt.Rows)
{
str += rows["PointX"].ToString() + "&" + rows["PointY"].ToString() + "&" + rows["Company"].ToString() + "&" + rows["Explain"].ToString();
str += "&" + rows["MarkType"].ToString() + "&" + rows["ComImage"].ToString() + "|";
}
return str;
} private static DataTable GetData()
{
DataTable dt = new DataTable();
string sql = "select * from MapMark";
SqlConnection cnn = new SqlConnection(SqlCon);
using (SqlCommand cmm = new SqlCommand(sql, cnn))
{
using (SqlDataAdapter dapter = new SqlDataAdapter(cmm))
{
dapter.Fill(dt);
}
}
return dt;
}
代码效果为：