FileMaker Pro 2017使用JavaScript加载百度地图并与数据库记录同步切换

应意大利大明星同学的要求做的小案例
指定必须用filemaker做数据库并同步和记录显示,查了些资料,最后记录如下:

  "data:text/html,<html>
    <head>
    	<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
    	<meta name=\"viewport\" content=\"initial-scale=1.0, user-scalable=no\" />
    	<style type=\"text/css\">
    		body, html{width: 100%;height: 100%;margin:0;font-family:\"微软雅黑\";}
    		#allmap{height:260px;width:495px;}		
    	</style>
    	<script type=\"text/javascript\" src=\"http://api.map.baidu.com/api?v=2.0&ak=申请的百度密钥key\"></script>
    	<title>城市名定位</title>
    </head>
    <body>
    	<div id=\"allmap\"></div>	
    </body>
    </html>
    <script type=\"text/javascript\">
    	// 百度地图API功能
    	var map = new BMap.Map(\"allmap\");
    	map.centerAndZoom(new BMap.Point(" & $jingdu & "," & $weidu & "),17);
     	map.enableScrollWheelZoom(true);
    	
    	// 用经纬度设置地图中心点		
    	map.clearOverlays(); 
    	var new_point = new BMap.Point(" & $jingdu & "," & $weidu & ");
    	var marker = new BMap.Marker(new_point);  // 创建标注
    	map.addOverlay(marker);              // 将标注添加到地图中
    	map.panTo(new_point);   
    
     // 添加带有定位的导航控件
      var navigationControl = new BMap.NavigationControl({
        // 靠左上角位置
        anchor: BMAP_ANCHOR_TOP_LEFT,
        // LARGE类型
        type: BMAP_NAVIGATION_CONTROL_LARGE,
        // 启用显示定位
        enableGeolocation: true
      });
      map.addControl(navigationControl);
      // 添加定位控件
      var geolocationControl = new BMap.GeolocationControl();
      geolocationControl.addEventListener(\"locationSuccess\", function(e){
        // 定位成功事件
        var address = '';
        address += e.addressComponent.province;
        address += e.addressComponent.city;
        address += e.addressComponent.district;
        address += e.addressComponent.street;
        address += e.addressComponent.streetNumber;
        alert(\"当前定位地址为:\" + address);
      });
      geolocationControl.addEventListener(\"locationError\",function(e){
        // 定位失败事件
        alert(e.message);
      });
      map.addControl(geolocationControl);
    </script>"

引用需修改代码中的百度密钥(免费去百度申请)
以下为展示效果
在这里插入图片描述

修改流程如下:
在这里插入图片描述

在这里插入图片描述

点击转到URL…,再次选择***转到URL…***会弹出修改窗口

在这里插入图片描述

指定 按钮进行修改
在这里插入图片描述

代码中的 ¶ 号是filemaker自动url编码加上去的,自己写代码的时候是没有的!!

data:text/html,

这句代码后面写整个网页的源代码,包括javascript,(要注意的是编写完成后整个代码页包括data:text/html,是一个字符串类型即可)

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值