博客园_酸奶小妹

【“零起点”--百度地图手机SDK】如何添加地图图层+按钮事件+水平垂直布局？

2012-05-25T10:02:00Z

摘要：我们在这一章将学习到如何通过按钮事件来控制地图图层（交通流量图，卫星图）的显示，以及如何对android应用进行水平和垂直布局。

----------------------------------------------------------------------

系列阅读：

1、【百度地图-安卓SDK】从头开始写android程序
http://www.cnblogs.com/milkmap/archive/2011/11/25/2263475.html

2、【“零起点”--百度地图手机SDK】如何创建一张地图
http://www.cnblogs.com/milkmap/archive/2012/05/11/2496526.html

3、【“零起点”--百度地图手机SDK】如何使用离线地图？

http://www.cnblogs.com/milkmap/archive/2012/05/21/2511928.html

-----------------------------------------------------------------------

一、水平和垂直布局

1、决定效果

我们要添加两个图层按钮，和一个地图视图。

将按钮群和地图垂直布局，按钮群内部的两个按钮水平布局，如下图：

2、找到并打开布局的xml文件

在工程目录-》res-》layout-》main.xml

3、然后，进行总体的布局。

最外部的layout是vertical垂直的。

按钮群是horizontal水平排布的。

最后一个地图视图横竖都无所谓，因为它要占满整个布局。

4、main.xml文件的全部源代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="100px"
android:orientation="horizontal" >

<Button
android:id="@+id/satelliteBTN"
android:layout_width="150px"
android:layout_height="100px"
android:layout_weight="1"
android:text="卫星图" />
<Button
android:id="@+id/trafficBTN"
android:layout_width="150px"
android:layout_height="100px"
android:layout_weight="1"
android:text="交通流量" />
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<com.baidu.mapapi.MapView
android:id="@+id/bmapsView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:clickable="true" >
</com.baidu.mapapi.MapView>
</LinearLayout>
</LinearLayout>

二、地图图层

根据官网的开发指南，大家可以很容易地在开发指南里找到关于图层的代码。

mMapView.setSatellite(true); //卫星图
mMapView.setTraffic(true); //交通流量

哈哈，实在是太简单了！

直接添加这两句话，可以让交通流量和卫星图的图层直接显示出来。

下面我们来添加按钮的事件，使得点击按钮后，出现卫星图，或是交通流量图。

三、按钮事件

以卫星图为例，我们来为按钮添加事件。

1、在布局xml文件中指定按钮的id。

xml文件的位置在本文开头已经说过了。

2、找到主java文件

工程名-》src-》com.baidu.searchpoi-》SearchPOIActivity.java

3、申明变量

在activity里面内先写申明

Button satelliteBtn = null; //卫星图按钮

4、添加按钮事件

在oncreate函数里写按钮事件

/** 卫星图按钮 **/
satelliteBtn = (Button)findViewById(R.id.satelliteBTN); //指定按钮的id
OnClickListener clickListener = new OnClickListener(){
public void onClick(View v) {
mMapView.setSatellite(true); //卫星图
}
};
satelliteBtn.setOnClickListener(clickListener);

5、效果

ok 运行一下。点击卫星图按钮后，卫星图就展示出来了。

6、交通流量图

同理，可以制作出交通流量图。注意变量名称不要重复，ID不要重复，事件的名称也不要重复。

交通流量的效果图如下：

7、java文件全部源代码

package com.baidu.searchpoi;

import android.app.Activity;
import android.os.Bundle;

/** 引入类 **/
import java.util.ArrayList;
import java.util.List;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Point;
import android.graphics.drawable.Drawable;
import android.location.Location;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;

import com.baidu.mapapi.BMapManager;
import com.baidu.mapapi.GeoPoint;
import com.baidu.mapapi.ItemizedOverlay;
import com.baidu.mapapi.LocationListener;
import com.baidu.mapapi.MKAddrInfo;
import com.baidu.mapapi.MKDrivingRouteResult;
import com.baidu.mapapi.MKGeneralListener;
import com.baidu.mapapi.MKLocationManager;
import com.baidu.mapapi.MKOLUpdateElement;
import com.baidu.mapapi.MKOfflineMap;
import com.baidu.mapapi.MKOfflineMapListener;
import com.baidu.mapapi.MKPlanNode;
import com.baidu.mapapi.MKPoiResult;
import com.baidu.mapapi.MKSearch;
import com.baidu.mapapi.MKSearchListener;
import com.baidu.mapapi.MKTransitRouteResult;
import com.baidu.mapapi.MKWalkingRouteResult;
import com.baidu.mapapi.MapActivity;
import com.baidu.mapapi.MapController;
import com.baidu.mapapi.MapView;
import com.baidu.mapapi.MyLocationOverlay;
import com.baidu.mapapi.Overlay;
import com.baidu.mapapi.OverlayItem;
import com.baidu.mapapi.PoiOverlay;
import com.baidu.mapapi.RouteOverlay;
import com.baidu.mapapi.TransitOverlay;

/** activity **/
public class SearchPOIActivity extends MapActivity {
//申明变量
BMapManager mBMapMan = null;
MapView mMapView = null;
MKOfflineMap mOffline = null; //离线地图变量
Button satelliteBtn = null; //卫星图按钮
Button trafficBtn = null; //交通流量按钮

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

mBMapMan = new BMapManager(getApplication());
mBMapMan.init("4AA2949E616E069C37CDC3152E8C401A05A0035D", null);
super.initMapActivity(mBMapMan);

mMapView = (MapView) findViewById(R.id.bmapsView);
mMapView.setBuiltInZoomControls(true); //设置启用内置的缩放控件

MapController mMapController = mMapView.getController(); // 得到mMapView的控制权,可以用它控制和驱动平移和缩放
GeoPoint point = new GeoPoint((int) (39.93 * 1E6),
(int) (116.42 * 1E6)); //用给定的经纬度构造一个GeoPoint，单位是微度 (度 * 1E6)
mMapController.setCenter(point); //设置地图中心点
mMapController.setZoom(13); //设置地图zoom级别

/** 离线地图初始化 **/
mOffline = new MKOfflineMap();
mOffline.init(mBMapMan, new MKOfflineMapListener() {
public void onGetOfflineMapState(int type, int state) {
switch (type) {
case MKOfflineMap.TYPE_DOWNLOAD_UPDATE:
{
MKOLUpdateElement update = mOffline.getUpdateInfo(state);
//mText.setText(String.format("%s : %d%%", update.cityName, update.ratio));
}
break;
case MKOfflineMap.TYPE_NEW_OFFLINE:
Log.d("OfflineDemo", String.format("add offlinemap num:%d", state));
break;
case MKOfflineMap.TYPE_VER_UPDATE:
Log.d("OfflineDemo", String.format("new offlinemap ver"));
break;
}
}
}
);
/** 离线地图导入离线包 **/
int num = mOffline.scan();
//if (num != 0) mText.setText(String.format("已安装%d个离线包", num));

/** 卫星图按钮 **/
satelliteBtn = (Button)findViewById(R.id.satelliteBTN); //指定按钮的id
OnClickListener clickListener = new OnClickListener(){
public void onClick(View v) {
mMapView.setSatellite(true); //卫星图
}
};
satelliteBtn.setOnClickListener(clickListener);

/** 交通流量按钮 **/
trafficBtn = (Button)findViewById(R.id.trafficBTN); //指定按钮的id
OnClickListener clickListener2 = new OnClickListener(){
public void onClick(View v) {
mMapView.setTraffic(true); //交通流量
}
};
trafficBtn.setOnClickListener(clickListener2);
}

@Override
protected boolean isRouteDisplayed() {
return false;
}

@Override
protected void onDestroy() {
if (mBMapMan != null) {
mBMapMan.destroy();
mBMapMan = null;
}
super.onDestroy();
}

@Override
protected void onPause() {
if (mBMapMan != null) {
mBMapMan.stop();
}
super.onPause();
}

@Override
protected void onResume() {
if (mBMapMan != null) {
mBMapMan.start();
}
super.onResume();
}

}

注意，以上代码保留了上一章中讲述的“离线地图”。

本文链接

【“零起点”--百度地图手机SDK】如何使用离线地图？

2012-05-21T09:16:00Z

摘要：用户使用地图的时候，希望不联网就能展示地图。这时，就需要使用到离线地图了。如何在百度地图SDK里引入离线地图呢？

-------------------------------------------------------------------------------------------------------------------

【百度地图API】批量地址解析与批量反地址解析（带商圈数据）

2012-05-16T07:53:00Z

摘要：因为地址解析的webserives方式还没有开通，所以先用JS版本的地址解析接口来批量获取地址解析数据吧，同时还能得到商圈的数据呀~~

----------------------------------------------------------------------------------------------------------------------------------

API和SDK都可以不展示地图，直接获取数据。

所以，建议大家都不要用webserives方式啦，因为webserives方式一般都有很高的限制。

用到了地址解析和反地址解析的接口。

类参考：http://dev.baidu.com/wiki/map/index.php?title=Class:%E6%9C%8D%E5%8A%A1%E7%B1%BB/Geocoder

下面分别是地址解析和反地址解析的demo图，还有全部源代码。

全部源代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>批量反地址解析+商圈</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
</head>
<body>
<input type="button" value="批量反地址解析+商圈" onclick="bdGEO()" />
<div id="result"></div>
</body>
</html>
<script type="text/javascript">
var index = 0;
var myGeo = new BMap.Geocoder();
var adds = [
new BMap.Point(116.354682,39.95134),
new BMap.Point(116.445806,39.933859),
new BMap.Point(116.421373,39.952888),
new BMap.Point(116.383428,39.884491)
];

function bdGEO(){
var pt = adds[index];
geocodeSearch(pt);
index++;
}
function geocodeSearch(pt){
if(index < adds.length){
setTimeout(window.bdGEO,300);
}
myGeo.getLocation(pt, function(rs){
var addComp = rs.addressComponents;
document.getElementById("result").innerHTML += adds[index-1].lng + "," + adds[index-1].lat + "：" + "商圈(" + rs.business + ") 结构化数据(" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + ")</br>";
});
}
</script>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>批量地址解析</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
</head>
<body>
<input type="button" value="批量地址解析" onclick="bdGEO()" />
<div id="result"></div>
</body>
</html>
<script type="text/javascript">
var index = 0;
var myGeo = new BMap.Geocoder();
var adds = [
"百度大厦",
"奎科大厦",
"中央民族大学",
"北京市海淀区中关村大街"
];

function bdGEO(){
var a = adds[index];
geocodeSearch(a);
index++;
}
function geocodeSearch(a){
if(index < adds.length){
setTimeout(window.bdGEO,300);
}
myGeo.getPoint(a, function(point){
if (point) {
myGeo.getLocation(point, function(rs){
var addComp = rs.addressComponents;
document.getElementById("result").innerHTML += adds[index-1] + "：" + "商圈(" + rs.business + ")" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + "</br>";
});
}
}, "全国");
}
</script>

本文链接

【“零起点”--百度地图手机SDK】如何创建一张地图

2012-05-11T10:11:00Z

摘要：完全零基础入门篇~~本文是安卓SDK的入门篇，从头开始教大家如何创建一张安卓手机版的百度地图。

-----------------------------------------------------------------------------

一、环境的安装

需要安装eclipse、android ADT等环境。详见：【百度地图-安卓SDK】从头开始写android程序

http://www.cnblogs.com/milkmap/archive/2011/11/25/2263475.html

二、新建一个helloworld程序

1、File->New->Android Project

2、输入项目名称->Next

3、选择android版本->next

百度地图安卓SDK支持1.5以上的安卓版本。

由于我的手机是2.2的，所以我勾选了android 2.2的选项。

4、输入oackage name->finish

5、右键点击工程->Run as->android application

我是连接真机运行的，当然用户也可以使用虚拟机。

不过使用虚拟机不能开启定位功能哦。

6、运行成功！

三、创建一张百度地图

1、注册key：http://dev.baidu.com/wiki/static/imap/key/

2、下载开发包：http://dev.baidu.com/wiki/imap/index.php?title=Android%E5%B9%B3%E5%8F%B0/%E7%9B%B8%E5%85%B3%E4%B8%8B%E8%BD%BD

3、新建libs文件夹

右键点击项目->new->folder

输入名称->finish

将开发包解压缩，会发现有两个文件。

把baidumapapi.jar拷贝到libs根目录下；把libBMapApiEngine.so拷贝到libs\armeabi目录下。（armeabi目录的新建方式和libs类似）

右键单击项目->properties

Java Build Path->Libraries->Add JARs

选择刚才引入的jar文件->OK

4、找到androidManifest.xml文件，增加使用权限和版本支持的代码。

androidManifest.xml全部源文件：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.baidu.milkmap"
android:versionCode="1"
android:versionName="1.0" >

<uses-sdk android:minSdkVersion="8" />

<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name" >
<activity
android:name=".MilkmapActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>


<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"></uses-permission>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"></uses-permission>
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"></uses-permission>
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"></uses-permission>
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE"></uses-permission>
<uses-permission android:name="android.permission.READ_PHONE_STATE"></uses-permission>


<supports-screens android:largeScreens="true"
android:normalScreens="true" android:smallScreens="true"
android:resizeable="true" android:anyDensity="true"/>
<uses-sdk android:minSdkVersion="3"></uses-sdk>

</manifest>

5、添加地图控件

项目->res->layout->main.xml

这是布局的xml文件，在这里增加地图控件的代码。

main.xml文件全部源代码如下：

6、编写地图程序

项目->src->milkmapActivity.java

这里需要import一些文件，然后让自己的mapactivity继承百度提供的MapActivity。继承的对象里面，要申明变量，再写方法。

（注意，类名和文件名保持一致！比如，我的文件名是MilkmapActivity.java，那么我的地图类名就是MilkmapActivity）

更换自己的key。

引入管理API的一些方法。

MilkmapActivity.java的全部源代码：

package com.baidu.milkmap;
import android.app.Activity;
import android.os.Bundle;

/** 引入import **/
import java.util.ArrayList;
import java.util.List;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Point;
import android.graphics.drawable.Drawable;
import android.location.Location;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Toast;

import com.baidu.mapapi.BMapManager;
import com.baidu.mapapi.GeoPoint;
import com.baidu.mapapi.ItemizedOverlay;
import com.baidu.mapapi.LocationListener;
import com.baidu.mapapi.MKAddrInfo;
import com.baidu.mapapi.MKDrivingRouteResult;
import com.baidu.mapapi.MKGeneralListener;
import com.baidu.mapapi.MKLocationManager;
import com.baidu.mapapi.MKPlanNode;
import com.baidu.mapapi.MKPoiResult;
import com.baidu.mapapi.MKSearch;
import com.baidu.mapapi.MKSearchListener;
import com.baidu.mapapi.MKTransitRouteResult;
import com.baidu.mapapi.MKWalkingRouteResult;
import com.baidu.mapapi.MapActivity;
import com.baidu.mapapi.MapController;
import com.baidu.mapapi.MapView;
import com.baidu.mapapi.MyLocationOverlay;
import com.baidu.mapapi.Overlay;
import com.baidu.mapapi.OverlayItem;
import com.baidu.mapapi.PoiOverlay;
import com.baidu.mapapi.RouteOverlay;
import com.baidu.mapapi.TransitOverlay;

/** 继承MapActivity类 **/
public class MilkmapActivity extends MapActivity {

/** 申明变量 **/
BMapManager mBMapMan = null;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

/** 创建地图 **/
mBMapMan = new BMapManager(getApplication());
mBMapMan.init("1713A92A7A0C854D1B8717670EF8B6CA75696567", null);
super.initMapActivity(mBMapMan);

MapView mMapView = (MapView) findViewById(R.id.bmapsView);//地图控件，不添加的话，就不用写。
mMapView.setBuiltInZoomControls(true); //设置启用内置的缩放控件
MapController mMapController = mMapView.getController(); // 得到mMapView的控制权,可以用它控制和驱动平移和缩放
GeoPoint point = new GeoPoint((int) (39.915 * 1E6),
(int) (116.404 * 1E6)); //用给定的经纬度构造一个GeoPoint，单位是微度 (度 * 1E6)
mMapController.setCenter(point); //设置地图中心点
mMapController.setZoom(12); //设置地图zoom级别

//mMapView.setSatellite(true); //卫星图
//mMapView.setTraffic(true); //交通流量

}

@Override
protected boolean isRouteDisplayed() {
return false;
}

/** 引入方法管理API **/
@Override
protected void onDestroy() {
if (mBMapMan != null) {
mBMapMan.destroy();
mBMapMan = null;
}
super.onDestroy();
}
@Override
protected void onPause() {
if (mBMapMan != null) {
mBMapMan.stop();
}
super.onPause();
}
@Override
protected void onResume() {
if (mBMapMan != null) {
mBMapMan.start();
}
super.onResume();
}
}

7、运行，点击绿色的运行按钮就行。

OK啦，出来地图了~

本文链接

【百度地图API】如何判断点击的是地图还是覆盖物？

2012-04-18T09:02:00Z

摘要：很多API爱好者问我，为什么我点击的是marker，而map也会响应该事件呢？怎样才能判断，我点击的是标注，还是地图呢？下面一起来看看。

------------------------------------------------------------

先看看地图有哪些事件，查看官网类参考，翻到事件：

大家看到这里的参数了麽？

其实，在点击物体时，通过这些参数就能够判断所点击的物体是什么了。

用marker举例：

先创建一个marker

//覆盖物Marker
var pmk = new BMap.Point(116.249472,39.946583);
var mk = new BMap.Marker(pmk);
map.addOverlay(mk);

然后对地图添加点击事件，如果判断出来是覆盖物，就弹出相应的对话框。

map.addEventListener("click",function(e){
if(e.overlay){
alert('你点击的是覆盖物：'+e.overlay.toString());
}else{
alert('你点击的是地图');
}
});

添加一堆覆盖物，然后给每个覆盖物写点击事件。

比如我点击了多边形，就会弹出这个。

全部源代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>点击事件</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=v=1.3"></script>
</head>

<body>

<div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>
</body>
<script type="text/javascript">
var map = new BMap.Map("dituContent");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);
map.enableScrollWheelZoom();

map.addEventListener("click",function(e){
if(e.overlay){
alert('你点击的是覆盖物：'+e.overlay.toString());
}else{
alert('你点击的是地图');
}
});

//覆盖物Marker
var pmk = new BMap.Point(116.249472,39.946583);
var mk = new BMap.Marker(pmk);
map.addOverlay(mk);

//覆盖物Label
var plb = new BMap.Point(116.408149,39.958087);
var lb = new BMap.Label('我是覆盖物Label',{point:plb});
map.addOverlay(lb);

//覆盖物Polyline
var pl = new BMap.Polyline([new BMap.Point(116.250047,39.919583),new BMap.Point(116.441494,39.919583)],{strokeWeight:10})
map.addOverlay(pl);

//覆盖物Polygon
var pg = new BMap.Polygon([new BMap.Point(116.248323,39.893016),new BMap.Point(116.440344,39.893016),new BMap.Point(116.440344,39.811036),new BMap.Point(116.248323,39.811036)]);
map.addOverlay(pg);

</script>
</html>

本文链接

【百度地图API】如何获取行政区域的边界？

2012-04-11T07:21:00Z

摘要：以前教过大家如何自行获取行政区域，或者自定义获取一个区域的边界值。今天来教大家直接调用百度地图API1.3（目前最新版本）来获取行政区域的边界值。

--------------------------------------------------------------------------------------

一、建立地图

创建地图对象；设立中心点。

var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 5);

二、添加地图事件和控件

控件：鱼骨控件我用了迷你型的；

地图事件：添加了滚轮缩放。

map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL}));
map.enableScrollWheelZoom();

三、获取行政区域

构造函数Boundary；

get方法，获取行政区域的边界。

rs是获取到的结果。

var bdary = new BMap.Boundary();
bdary.get(name, function(rs){ //获取行政区域
//这里是用户自己的函数。
});

四、添加覆盖物

获取到边界的点数组后，添加一个多边形覆盖物。

var count = rs.boundaries.length; //行政区域的点有多少个
for(var i = 0; i < count; i++){
var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
map.addOverlay(ply); //添加覆盖物
}

五、调整视野

points为一系列点的数组，系统自动展示points里所有点。

map.setViewport(points); //调整视野

效果图：

全部源代码：

<!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=utf-8" />
<title>获取地区轮廓线</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3">
</script>
<style type="text/css">
body{font-size:13px;margin:10px}
#container{width:800px;height:500px;border:1px solid gray}
</style>
</head>
<body>
<div id="container"></div>
<br />
输入省、直辖市或县名称：<input type="text" id="districtName" style="width:80px" value="重庆市">
<input type="button" onclick="getBoundary()" value="获取轮廓线">

<script type="text/javascript">
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 5);
map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL}));
map.enableScrollWheelZoom();

function getBoundary(){
var bdary = new BMap.Boundary();
var name = document.getElementById("districtName").value;
bdary.get(name, function(rs){ //获取行政区域
map.clearOverlays(); //清除地图覆盖物
var count = rs.boundaries.length; //行政区域的点有多少个
for(var i = 0; i < count; i++){
var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
map.addOverlay(ply); //添加覆盖物
map.setViewport(ply.getPath()); //调整视野
}
});
}

</script>
</body>
</html>

《自行获取区域经纬度的工具》

http://www.cnblogs.com/milkmap/archive/2012/02/23/2365064.html

本文链接

【百度地图API】如何激发手机的高分辨率

2012-04-06T09:35:00Z

摘要：不少用户使用百度地图API开发在移动浏览器上的应用时发现，明明自己的手机是高分辨率的，但是显示出来的地图却比较模糊，甚至“看不清楚”。接下来，我们要学习如何激发手机浏览器的高分辨率功能。

--------------------------------------------------------------------------------

以安卓手机为例，我们使用PhoneGap来写一段API代码。

代码A：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Phonegap+API</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<style type="text/css">
#container{height:300px;width:300px;padding:0;margin:0;border:1px solid red;}
</style>
</head>
<body>
展示上海市地图
<div id="container"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");
map.centerAndZoom("上海",12);
</script>

大家注意，地图容器的高宽均为300px。

这个实验的测试用机是HTC G7。屏幕分辨率为762*480。

从eclipse的log里也能看出G7的分辨率，如下图：

那么代码A运行出来是什么样子呢？

运行出来之后，让大家大吃一惊，“怎么满屏了呢？”

如下图：

如何解决高低分屏的分辨率问题？

因为HTC G7已经属于高分辨率的屏幕了，所以普通级别不适合它。

大家有没有注意代码A里这句话：

“user-scalable=no”是为了禁止用户放大缩小浏览器窗口内的东西。因为百度地图API提供了双指放大缩小地图的功能。所以，同理，我们在这里加上“target-densitydpi=device-dpi”，就可以让设备显示自身的分辨率了。类似的，还有“width=device-width”，自动调整设备宽度。我们再来看看加上这段代码之后的效果图：

地图缩小了吧。这才是HTC G7真实分辨率~

记得，要用以下代码，设备就能显示正常的分辨率了哦~

附PhoneGap安卓开发指南：http://www.phonegap.cn/?page_id=442#android

本文链接

【百度地图API】手机浏览器抓包工具及其使用方法

2012-03-13T10:51:00Z

摘要：为了测试地图API在手机浏览器上的性能，需要给手机浏览器设置代理。通过代理，我们可以在PC上获取到抓包数据。进而对性能做进一步分析。

------------------------------------------------------

一、手机浏览器抓包工具

Paros 3.2.13

二、如何配置

1、将电脑和手机连到同一个wifi环境中

2、找到电脑的IP

可以点击网卡图标，找到IP信息

也可以在cmd下，使用ipconfig

3、打开Paros，点击Tools->Options

4、将电脑的IP填入，必须是本机的实时IP哦。不能是127.0.0.1.

5、将手机wifi的代理也填成电脑的IP。

三、完成！

这时代理就做好了。你只需要在手机上打开浏览器，Paros就开始抓包啦。

百度地图API定位示例抓包：

谷歌地图API定位示例抓包：

全部源代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>浏览器定位</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
</head>
<style>
body,html,#container{height:100%;width:100%;padding:0;margin:0;}
</style>
<body>
<div id="container"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container"); // 创建Map实例
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);

var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
alert('您的位置：'+r.point.lng+','+r.point.lat);
}
else {
alert('failed'+this.getStatus());
}
})
</script>

<!DOCTYPE html>
<html DIR="LTR">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps JavaScript API v3 示例：地图地理位置</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://code.google.com/apis/gears/gears_init.js"></script>
<script type="text/javascript">

var initialLocation;
var siberia = new google.maps.LatLng(60, 105);
var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
var browserSupportFlag =new Boolean();
var map;
var infowindow = new google.maps.InfoWindow();

function initialize() {
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

// Try W3C Geolocation method (Preferred)
if(navigator.geolocation) {
browserSupportFlag = true;
navigator.geolocation.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
contentString = "Location found using W3C standard";
map.setCenter(initialLocation);
infowindow.setContent(contentString);
infowindow.setPosition(initialLocation);
infowindow.open(map);
}, function() {
handleNoGeolocation(browserSupportFlag);
});
} else if (google.gears) {
// Try Google Gears Geolocation
browserSupportFlag = true;
var geo = google.gears.factory.create('beta.geolocation');
geo.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
contentString = "Location found using Google Gears";
map.setCenter(initialLocation);
infowindow.setContent(contentString);
infowindow.setPosition(initialLocation);
infowindow.open(map);
}, function() {
handleNoGeolocation(browserSupportFlag);
});
} else {
// Browser doesn't support Geolocation
browserSupportFlag = false;
handleNoGeolocation(browserSupportFlag);
}
}

function handleNoGeolocation(errorFlag) {
if (errorFlag == true) {
initialLocation = newyork;
contentString = "Error: The Geolocation service failed.";
} else {
initialLocation = siberia;
contentString = "Error: Your browser doesn't support geolocation. Are you in Siberia?";
}
map.setCenter(initialLocation);
infowindow.setContent(contentString);
infowindow.setPosition(initialLocation);
infowindow.open(map);
}
</script>
<style>
body,html,#map_canvas{height:100%;width:100%;padding:0;margin:0;}
</style>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>

本文链接

【百度地图API】如何利用PhoneGap制作地图APP

2012-03-02T10:34:00Z

摘要：百度地图API是一套由javascript编写的地图程序接口，按说它应该运行在浏览器上。现在，只要利用PhoneGap，我们就能开发出移动平台上能使用的APP了！

---------------------------------------------

一、安装平台

PhoneGap支持5种平台，IOS，安卓，黑莓，WebOS，塞班。

我们下面以IOS为例，开发一个定位的APP。

1、下载xCode

注意看清楚，狮子系统和雪豹系统的安装程序是不一样的。

a.可以到苹果应用商店app store上下载，不过速度非常的慢，一通宵都下载不到20%……优点是免费。

b.也可以到macx上下载，速度快，非会员收费。

c.其实也可以找有安装程序的人拷贝，速度快，也免费……

2、下载PhoneGap

到官网上下载，免费的，https://github.com/phonegap/phonegap/zipball/1.0.0

二、项目配置

1、启动xCode，在菜单那里选择“create a new xcode project”

2、从模板列表里选择“phonegap-based application”，然后next

3、输入公司名称、项目名称

4、选择储存目录。

我一般就放到桌面上，哈哈。

5、右键单击（触控板2个手指按）项目左侧的导航窗口，点击“show in Finder”。

6、找到www文件夹。

7、把www文件夹拖动到蓝色项目条上

8、把你的地图htm文件拷贝到index.html里面。点击运行，就OK啦~

另外，最好部署到真机上，虚拟机上很多功能不是很好用。

全部源代码：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>冀兴驾校--手机版</title>

<link rel="icon" type="image/x-icon" href="http://www.jixingjx.com/favicon.ico" />

<meta name="keyword" content="冀兴驾校,冀兴驾校手机版,jixingjiaxiao"/>

<meta name="description" content="冀兴驾校手机版，让你更快更准确地找到冀兴驾校！"/>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>

<style>

body,html,#jx_map{height:100%;width:100%;padding:0;margin:0;font-size:14px;}

</style>

</head>

<body>

<div id="jx_map"></div>

</body>

<script type="text/javascript">

var map = new BMap.Map("jx_map");

map.centerAndZoom("北京", 14);

map.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP, BMAP_HYBRID_MAP], anchor:BMAP_ANCHOR_TOP_LEFT}));

map.addControl(new BMap.NavigationControl({type:BMAP_NAVIGATION_CONTROL_ZOOM, anchor:BMAP_ANCHOR_BOTTOM_RIGHT}));

// 定义一个控件类

function MyLocation(){

this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;

this.defaultOffset = new BMap.Size(10, 10);

}

MyLocation.prototype = new BMap.Control();

MyLocation.prototype.initialize = function(map){

var div = document.createElement("div");

div.appendChild(document.createTextNode("定位"));

// 设置样式

div.style.cursor = "pointer";

div.style.border = "1px solid gray";

div.style.backgroundColor = "white";

div.style.padding = "10px";

div.style.borderRadius = "5px";

div.onclick = function(e){

var geolocation = new BMap.Geolocation();

geolocation.getCurrentPosition(function(r){

if(this.getStatus() == BMAP_STATUS_SUCCESS){

var mk = new BMap.Marker(r.point);

map.addOverlay(mk);

map.panTo(r.point);

gc.getLocation(r.point, function(rs){

var sContent = "您的位置是:</br>" + rs.address;

var infoWindow = new BMap.InfoWindow(sContent, {width:150, offset:new BMap.Size(0,-20)});

map.openInfoWindow(infoWindow, r.point);

});

}

else {

alert("网络不通，请稍后再试。");

}

})

}

map.getContainer().appendChild(div);

return div;

}

var mylocation = new MyLocation(); //定位

map.addControl(mylocation);

var gc = new BMap.Geocoder(); //地址解析

</script>

<script type="text/javascript">

var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");

document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fc20b7442b4e0e7b9e42e799fae5f60bd' type='text/javascript'%3E%3C/script%3E"));

</script>

</html>

本文链接

【百度地图API】自行获取区域经纬度的工具

2012-02-23T08:08:00Z

摘要：上一章教大家如何建立自己的行政区域地图。这次为大家提供一个，可视化选择区域，并且能自动生成经纬度代码的工具。工具的源代码完全公开，并且做了详尽的注释。可以单纯做为一个工具，也可做为百度地图API的学习案例。

工具说明：

1、开关可以控制，是否在地图上建立折线覆盖物

2、双击地图，会建立多边形覆盖物

3、自动输入的经纬度信息，最后一行不要复制。因为map的dblclcik事件，会先触发两次click，最后才是dblclick。

4、清除按钮可以清除覆盖物，清除经纬度数据，重新来一次

全部源代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>行政区域工具</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
<p><input id="startBtn" type="button" onclick="startTool();" value="开启取点工具" /><input type="button" onclick="map.clearOverlays();document.getElementById('info').innerHTML = '';points=[];" value="清除" /></p>
<div id="info"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container"); // 创建Map实例
map.centerAndZoom("北京", 11); // 初始化地图,设置中心点坐标和地图级别

var key = 1; //开关
var newpoint; //一个经纬度
var points = []; //数组，放经纬度信息
var polyline = new BMap.Polyline(); //折线覆盖物

function startTool(){ //开关函数
if(key==1){
document.getElementById("startBtn").style.background = "green";
document.getElementById("startBtn").style.color = "white";
document.getElementById("startBtn").value = "开启状态";
key=0;
}
else{
document.getElementById("startBtn").style.background = "red";
document.getElementById("startBtn").value = "关闭状态";
key=1;
}
}
map.addEventListener("click",function(e){ //单击地图，形成折线覆盖物
newpoint = new BMap.Point(e.point.lng,e.point.lat);
if(key==0){
// if(points[points.length].lng==points[points.length-1].lng){alert(111);}
points.push(newpoint); //将新增的点放到数组中
polyline.setPath(points); //设置折线的点数组
map.addOverlay(polyline); //将折线添加到地图上
document.getElementById("info").innerHTML += "new BMap.Point(" + e.point.lng + "," + e.point.lat + "),</br>"; //输出数组里的经纬度
}
});
map.addEventListener("dblclick",function(e){ //双击地图，形成多边形覆盖物
if(key==0){
map.disableDoubleClickZoom(); //关闭双击放大
var polygon = new BMap.Polygon(points);
map.addOverlay(polygon); //将折线添加到地图上
}
});
</script>

本文链接