<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>16.1</title> <script type=text/javascript src=http://fw.qq.com/ipaddress></script>
<script type="text/javascript">
var iscreatr = false; //是否创建
var map; // 百度地图
var marker; // 标注
var markX; // 标注x
var markY; // 标注y //加载完地图回调
function initialize() {
//---------------------------------------------基础示例---------------------------------------------
map = new BMap.Map("allmap", { minZoom: , maxZoom: }); // 创建Map实例
//map.centerAndZoom(new BMap.Point(116.4035,39.915),15); //初始化时,即可设置中心点和地图缩放级别。
map.centerAndZoom("成都", ); // 初始化地图,设置中心点坐标和地图级别。
map.enableScrollWheelZoom(true); //鼠标滑动轮子可以滚动 map.addEventListener("click", function (e) {
if (iscreatr == true) return;
//---------------------------------------------创建标注---------------------------------------------
iscreatr = true;
markX = e.point.lng;
markY = e.point.lat;
var point = new BMap.Point(e.point.lng, e.point.lat); //默认
// 创建标注对象并添加到地图
marker = new BMap.Marker(point);
var label = new BMap.Label("我是可以拖动的,右键取消的", { offset: new BMap.Size(, -) });
marker.setLabel(label)
map.addOverlay(marker);
marker.enableDragging(); //可拖拽
marker.addEventListener("dragend", function (e) { //标注拖动事件
markX = e.point.lng;
markY = e.point.lat;
document.getElementById("r-result").innerHTML = e.point.lng + ", " + e.point.lat; //打印拖动结束坐标
});
}); //---------------------------------------------鼠标右键取消标注操作---------------------------------------------
var menu = new BMap.ContextMenu(); //右键菜单
var txtMenuItem = [ //右键菜单项目
{
text: '取消',
callback: function () {
map.removeOverlay(marker);
iscreatr = false; }
}
]; for (var i = ; i < txtMenuItem.length; i++) {
menu.addItem(new BMap.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, )); //菜单添加项目
} map.addContextMenu(menu); } function loadScript() {
var script = document.createElement("script");
script.src = "http://api.map.baidu.com/api?v=1.4&callback=initialize";
document.body.appendChild(script);
} window.onload = loadScript; //-------------------------------------
//切换地图
function changeType(value) {
map.setCenter(value);
} //提交
function submit() {
if (iscreatr == true) {
alert(markX + ":" + markY);
}
}
</script> </head>
<body>
<div id="r-result" style="float:left;width:100px;">打印坐标</div>
<div id="allmap" style="float:left;width: 800px; height: 500px"></div>
<div id="r-result" style="float:left;width:100px;">
<input type="button" onclick="submit()" value="提交" /></br> 切换城市:<select onchange="changeType(this.value)" >
<option value ="北京">北京</option>
<option value ="广州">广州</option>
<option value="成都">成都</option>
</select>
</div>
</body> <script type="text/javascript">
// 移动到某点 map.panTo(new BMap.Point(116.409, 39.918));
// 移动到某城市 map.setCenter("广州"); //两秒后移动到广州 // map.setZoom(14); //放到到14级
</script>

百度地图Api进阶教程-实例高级操作8.html的更多相关文章

  1. 百度地图Api进阶教程-点击生成和拖动标注4.html

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 百度地图Api进阶教程-基础地图示例1.html

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. 百度地图Api进阶教程-地图鼠标左右键操作实例和鼠标样式6.html

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...

  4. 百度地图Api进阶教程-创建标注和自定义标注3.html

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...

  5. 百度地图Api进阶教程-用户自定义数据(标记和搜索)7.html

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. 百度地图Api进阶教程-弹出信息窗口5.html

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...

  7. 百度地图Api进阶教程-默认控件和自定义控件2.html

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...

  8. 百度地图Api进阶教程-点聚合9.html

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. ios 百度地图api 入门

    百度地图api 官方教程: http://developer.baidu.com/map/index.php?title=iossdk 这个非常好, 很适合新手 CLLocationCoordinat ...

随机推荐

  1. hibernate显示完整的sql(转)

    不完整的SQL Hibernate: /* insert com.test.bean.User */ insert into user (username, password, email, sex) ...

  2. InlineModelAdmin对象的学习

    一.InlineModelAdmin的介绍 管理界面可以在与父模型相同的页面上编辑模型.这些被称为内联. Django提供了两个子类,InlineModelAdmin它们是: TabularInlin ...

  3. js两个日期相减

    function dateHanle(d1,d2){ if(Date.parse(d1) - Date.parse(d2)==0) { console.log("d1等于d2"); ...

  4. Atitit 路径规划法attilax总结 扫描线路法

    Atitit 路径规划法attilax总结 扫描线路法 2017/2/8 20:43:37[吐槽]深圳-小 2017/2/8 20:43:37 群主做什么的2017/2/10 10:03:15系统消  ...

  5. 【Unity】9.1 导入粒子系统组件

    分类:Unity.C#.VS2015 创建日期:2016-05-02 一.简介 Unity 5.x已经自带了粒子系统组件,新建工程后只需要直接导入它就可以使用了. 二.导入Unity自带的粒子系统组件 ...

  6. 行为类模式(九):策略(Strategy)

    定义 针对一组算法,将每一个算法封装到具有共同接口的独立的类中,从而使得它们可以相互替换.策略模式使得算法可以在不影响到客户端的情况下发生变化. UML 优点 策略模式提供了管理相关的算法族的办法.策 ...

  7. Booleans

    两个取值false和true.但要注意Lua中所有的值都可以作为条件.在控制结构的条件中除了false和nil为假,其他值都为真.所以Lua认为0和空串都是真.

  8. android笔记---百度地图api应用 (一)

    package com.example.bdtest; import com.baidu.mapapi.MKEvent; import com.baidu.mapapi.MKPlanNode; imp ...

  9. bash(3):遍历文件

    #!/bin/bash function getdir(){ ` do dir_or_file=$"/"$element if [ -d $dir_or_file ] then g ...

  10. Tips for Navigating Large Game Code Bases

    http://solid-angle.blogspot.com/2015/08/tips-for-navigating-large-game-code.html